We are using a react-select dropdown and react-table grid below the dropdown. The issue I'm facing is, when I try to select a value from the dropdown, the cursor is trying the resize the table header when the dropdown values overlap with the table header.
I tried to create a sandbox code to explain the issue better but I found the issue in one of the existing examples here Sandbox example.
Please see the image below to understand the issue.
Image showing the issue
When the user clicks at the exact point on UI as shown in the pic above, instead of selecting a value from dropdown, the user ends up resizing the table header.
Is there any way to avoid this issue and ensure that the cursor stays on menu list?
Any help is appreciated.
add style={{ zIndex: "-1" }} to your ReactTable component
Related
I have encountered this strange issue where the dropdown will jump to the top left if scrolling with overflow: scroll or if it's bigger than the body.
I'm trying to "dynamically" change a dropdown button to an input on keypress, and have it share the same dropdown box. The content of the dropdown changes as you type.
I think it's better to illustrate the issue by showing a direct example, (because it's a bit big): https://jsfiddle.net/eno4v9kL/
The issue occurs if you scroll down, and then start typing something. It will then jump to the top left.
I have kind of tried to control the behavior of the dropdown but I don't understand how it should be handled;
dropdown = new bootstrap.Dropdown(elm);
I'm not quite sure how to handle this properly in JavaScript, because bootstrap initializes the dropdown automatically. How does one control this automatic behavior?
I think a possible solution would be to have 2 dropdowns, one for each element instead of sharing the same dropdown, but I would like to only use this one dropdown if possible
I have kind of a weird problem in my website, but which seems to be a problem of the UI library I'm using.
Every time I click a select element in my page the background is slightly changing, in width, which flickers the background image.
At first I though this is a problem in my code, but after checking, I see that in the UI library docs it also happens.
Example:
My site : https://dinsangun.github.io/crypto-converter/
The lib docs: https://mui.com/components/selects/
(In the lib docs, when you click a select element, pay attention to the slider on the right side, it disappears when the dropdown menu of the select items is clicked)
Is there a way to overcome this little bug?
Thanks.
Your problem comes from the scrollbar, when you click on the select it dissapears and so the background extends to cover all the screen.
It's the same problem for MUI website.
One of the solution I can propose would be to put on your body or root div height:100vh;overflow:hidden;
I am using Autocomplete-Input package in react native mobile app. I finished all the functtions properly, but i am facing problem with the styling of the drop suggestions list of Autocomplete. When i am making the list ovelay the other inputs the touchable(suggestions) not working fine.
This image showing Autocomplete working well but the lsit is pushing the whole design underneath and not overlaying
This is the code of the Autocomplete input
This is the style of the Autocomplete input
Here i changed the style to make the list overlaying the other inputs as shown in the next image
Here overlaying working fine but the problem is the touchable not working properly, so when i am pressing on any of suggesstions is not selected ...
The answer was to write "zIndex:1" after the "position:absolut".
position: "absolute",
elevation: 1,
zIndex: 1,
Below is the redux form example in official site.
http://redux-form.com/6.6.3/examples/react-widgets/.
If I click the dropdown component and select one item, move the mouse out of the dropdown and release the mouse, the dropdown value will be set Zero like below image.
How can I fix it, thanks.
I am using a DHTMLX 3T layout, in which topmost layout(a) has the bootstrap components(Drop down, search box, etc).
When I click on the dropdown, the menu is getting hidden behind the other layout(c) and I am unable to see the menu list. Can you let me know the solution for this problem so that i can see the menu items.
I have tried to set the z-index for the drop down but still unable to resolve the issue.
Your bootstrap menu is attached to the layout cell and designed so that it is not available to show it outside the current container.
You may only try to create your menu outside of the layout cell.