Issue with option visibility in ui-select + parent div has overflow-x to scroll

Question

I need to use ui-select within a parent div element which contains overflow-x: scroll style.

The problem is when we click on dropdown the option list hides behind the scrollbar. Please refer this image https://prnt.sc/oitdlw

I have created a sample at JSFiddle which shows the problem and expected result http://jsfiddle.net/u4q82a71/4/

Please let me know if any additional information is required.

Thanks in advance

Answer 1

Try this one. remove overflow-x:scroll

css

.inner {
  width: 140px;
  height: 70px;
}

Answer 2

I guess you can't remove overflow-x: scroll for some reason :) you can add this style to your <ui-select-choices>

.ui-select-choices {
    position: fixed;
    top: inherit;
    width: inherit !important;
}

then you can see it works fine even with your overflow-x: scroll hope it was helpful

Answer 3

If this is still an issue, the solution is to add append-to-body="true" to the ui-select element