'React-select dropdown list getting cut in IE11

React select (https://github.com/JedWatson/react-select) drop down list is not fully shown in IE, works in other browsers. on clicking to dropdown

Works on other browsers.

I tried setting the

.react-select__menu {
overflow-x:auto;
overflow-y:auto;
}

Tried also to set the position to absolute and fixed for react-select and overflow to visible when menu is open (not sure if correct).

and also setting the height for both menu and its child menu-list, nothing seems to work. what can be done to fix it ? Thanks in advance.

cssreactjsreact-select


Solution 1:[1]

it was a simple fix ,after many "un-necessary" trial and errors, i made the react-select position:absolute and it worked.

Solution 2:[2]

I don't have experience with react-select, however I suspect the parent is limiting the visibility of the drop-down menu. If you can add the CSS of the parent container to your answer, that might be helpful, but for now my suspicion is based on the way the menu is being cut off. If you inspect the drop-down does IE indicate the element hight is taller than what is shown, with the rest of it hidden on the page?

Another way to test this which might be faster, is to create a plain HTML document with the drop-down, no additional except for react select.

If it's still broken I think you would have a good case for opening a bug ticket on GIThub.

In the mean time, without knowing what the exact issue is, you might be able to use positioning on the parent or a nested child of the drop-down (as the top level might be position absolute) to get the drop-down to render correctly. Sometimes adding position:relative can resolve collapsing element issues.

Solution 3:[3]

I see that you solved your problem but I had this same issue and struggled with it for awhile. In case anyone else struggles with this I wanted to share how I solved it. My dropdown was cut off and I was having issues getting the scrollbar to show up, overflow: auto; was not working for me.

To make it work I added maxMenuHeight={150} to and set the position to fixed. Here is my code:

<div className="d-flex justify-content-end align-items-baseline">
                  <p className="font-size-14 mr-1 mt-3 align-self-end">Page</p>
                  <div className="mr-5 mb-5 align-self-start">
                    <Select
                      maxMenuHeight={150}
                      className="btn btn-mini position-fixed"
                      options={paginationOptions}
                      placeholder="1"
                    />
                  </div>

Solution 4:[4]

I have also faced the same issue. I just fixed it by using overflow: visible on the parent component of react select check attachment here. as the menu was cut down due to the overflow hidden of the absolute positioned parent.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 roma
Solution 2 radiantPudding
Solution 3 Dharman
Solution 4 Arsh Ahmad

Related Questions