Dropdown not working inside a container with horizontal scroll

Question

Dropdown not working inside a container with horizontal scroll

rftb opened this issue 6 years ago · 3 comments

We have a form that has the select with options styled using Formstone. That select is within a container that we want to have a width 100% and not be responsive, so we added the scrollbar.js to the container for the custom scroll bar. The problem is that the custom scrollbar appears fine, but the select within it is blank. If we disable the javascript for the container scrollbar, the select works fine again. Is this possible to have both within each other? Maybe a way to disable scroll on the select?

Answer 1 · 2019-02-18T19:09:19.000Z

Can you share a codepen or live link?

Answer 2 · 2019-02-18T22:03:08.000Z

@benplum Here is a link to a codepen I put together that shows what it is doing. https://codepen.io/bbowman02/pen/XOOpra

Answer 3 · 2019-02-20T15:01:43.000Z

Interesting. Looks like this has to do with the nested Dropdown's Scrollbar inheriting the horizontal styles from the containing vertical Scrollbar.

I just pushed a fix for this. You will need to update to 1.4.12 and double check your styles since it required adding specificity to the Scrollbar selectors.