I have this Drag and Drop menu that loads when user clicks the menu icon. Then they select an item and move it to a place to sort their favorite. This menu loads and works totally fine if I put it outside Popper. But inside popper, when user clicks to drag, the current element goes invisible.
This is sample of what I have
<Popper>
{({ TransitionProps }) => (
<DragDropContext onDragEnd={this.onDragEnd}>
<Droppable droppableId="droppable">
{(provided, snapshot) => (
{icons.map((item, index) => (
<Draggable>
These are packages that I use:
https://www.npmjs.com/package/react-beautiful-dnd
https://www.npmjs.com/package/#material-ui/core
Solution is here by the devs:
https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/portal/portal-app.jsx
Solution I applied is setting left and top like below:
const getItemStyle = (isDragging, draggableStyle) => ({
...draggableStyle,
left: "auto !important",
top: "auto !important",
});
Related
I am trying to write an automation script with protractor that will select an element from a react-select dropdown menu. However, when I select the dropdown menu element and use .click(), the menu doesn't open. It seems that the react-select dropdown isn't responding to the .click() call. Is there another method to call on the react-select dropdown that will click the menu and open it?
Code for the dropdown menu.
<div className={ cx('select-container')} data-mr-ass='grey-info'>
<Select
classNamePrefix='info'
components={{
DropdownIndicator: () => <Icon className={ cx('icon-wrap') } iconName={iconNames.downArrow} />,
Option: (props) => <div data-mr-ass='grey-info-options'> <components.Option {...props}/></div> }}
isSearchable={false}
onChange={selectGrayPercent}
options={grayOptions}
placeholder='Select'
value={grayValue}
openMenuOnClick={true}
/>
</div>
</div>
I tried doing $(attr('grey-info')).click(); but the menu doesn't open so I am unable to select any of the options in the menu. data-mr is my div class name to select elements using Protractor.
you can now use protractor-react-selector to identify web elements by react's component, props, and state.
You can identify your target element by:
const myElement = element(
by.react('Select', { someBooleanProp: true }, { someBooleanState: true })
);
Let me know if this helps!
I was trying to open popover when mouse is over an option of select control
but eachtime when popover opnes the select get closed.
_assignMouseOverPopover: function (select, popover) {
var items = select.getItems();
items.forEach(element => {
element.addEventDelegate({
onmouseover: this._showHoverPopover.bind(this, popover, element),
onmouseout: this._hideHoverPopover.bind(this, popover)
})
})
},
_showHoverPopover: function (popover, element, select) {
this._timeId = setTimeout(() => {
popover.openBy(element);
}, 100);
},
_hideHoverPopover: function (popover){
clearTimeout(this._timeId) || popover.close();
},
This is because both popover and dropdown list are rendered with the same id "sap-ui-static". Create a popover and open it; and inspect the html element with a debugger tool. You will see that it is rendered under a DIV element with id "sap-ui-static".
Create a select element and then open the dropdown list; ; and inspect the html element with a debugger tool. You will see that the list is rendered under a DIV element with id "sap-ui-static".
In my Angular application I have a grid that is almost identical to the Group Selection example in the ag-Grid docs: https://www.ag-grid.com/javascript-grid-selection/#gsc.tab=0
My requirement is slightly different in that my expand button needs to both expand the row and select the row. As you see in the plunker example selection and expansion are two separate click events, but I am looking to select the row and expand that same row in one click, without having the user click on the checkbox and the expand button. I have tried doing this with css by making the checkbox transparent and placing it over the expand icon, but the click is highjacked so only one event will fire...
Is this possible in ag-Grid?
In my component by columnDefs for the column that has my checkbox and expand icon looks like so:
...
this.gridOptions.columnDefs = [
{
headerName: '', width: 100, cellRenderer: 'group',
// for parent row selection - checkboxes for parent rows
checkboxSelection: function(params) {
return params.node.canFlower;
},
cellRendererParams: { value: ' ' }, colId: 'PlusIcon', pinned: 'left', cellClass: 'center'
},
...
Listen to the rowGroupOpened event and set the row to selected:
// inside the ag-grid tag
(gridReady)="onGridReady($event)"
// inside the AppComponent class
onGroupOpened(event){
event.node.setSelected(true)
console.log(event)
}
plnkr example
There is a link in the input form to a popup window to pickup subject categories. The popup window (modal) is a long list but it is not scrolling. If I am trying to scroll then the input form is scrolling and not the popup window. The popup window is moving up with the input form. I want the popup window to scroll, so that I can go through the list of 'subject categories' to select. I am trying to modified this open source software code for my local use.
function(resultingHtml){
//retrieve the dialog box
var $Result = $('<div></div>').html(resultingHtml);
var mainDialogDivision = $Result.find('div[id^=aspect_submission_ControlledVocabularyTransformer_div_vocabulary_dialog_]');
$('body').append($(mainDialogDivision[0]));
var vocabularyDialog = $('div#aspect_submission_ControlledVocabularyTransformer_div_vocabulary_dialog_' + vocabularyIdentifier);
vocabularyDialog.dialog({
autoOpen: true,
overflow: scroll,
height: 450,
width: 650,
modal: true,
title: $Result.find('title').html()
});
You should be able to accomplish this using CSS. Adding style overflow:auto to the main modal element should allow you to scroll through all the subject categories.
You don't mention which DSpace theme you are using, so I assume you are using theme Mirage (the default DSpace theme), then adding the following CSS to the style.css file of your theme should solve your scrolling problem:
.ui-dialog.ui-widget.ui-widget-content
{
overflow: auto
}
I have a webapp that on load performs window.scrollTo(0, 1); to hide the address bar which is working.
One of the elements is a header with fixed positioning of top: 0, causing it to stay topmost of the viewport. On this header there are a few clickable buttons, when you try to click them, instead of performing the action it scrolls the address bar into view.
This is a default safari behavior for the click on the top 15-20 pixels of the screen.
I have tried to capture the clicks and cancel the event, cancel bubbling, prevent default etc. None of which seemed to work.
The code I tried was adding a div with id test:
#test {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20px;
}
document.getElementById("test").addEventListener("click", function (event) {
event.preventDefault();
event.stopPropagation();
}, false);
Any ideas?
I use this for preventing default on mobile:
https://github.com/alexblack/google-fastbutton
$('#your-button').fastClick(function(e) {
e.preventDefault();
});
No address bar is shown. Pretty neat for UX also