Popout Menu is not visible outside of a scrollable area

[elis]

When creating a scrollable area and using a dropdown or any other popout element inside the scrollable area, it will not be shown outside of the overflow-hidden area.

See example:

I realize that this may not be directly related to the TODC port, but rather Bootstrap itself.

In any case, a possible solution might be by using Tether.js: https://github.com/HubSpot/tether

[acmetech]

Please verify if this issue is present when using only Bootstrap. Thanks

[todc]

Thanks for the report, @elis.

The .scrollable class is specific to todc-bootstrap, but I suspect the solution may need to lie in the dropdown javascript component.

Tether is an interesting project; thanks for the link. I'd like to avoid adding additional library dependencies -- especially for corner cases -- unless really needed. There are certainly many possible combinations of Bootstrap elements and components, and some may work better together than others. This may be a case where it's up to the end user to make it work.

If I find some cycles I'll see if I can find a nice solution for this as I can see it may be a fairly common use case. Even if we don't add a built-in solution, maybe we can demonstrate the solution in an example page or the docs.

[birkir]

this is because of overflow hidden property.

You need to move dropdown menu div, outside the div which has .scrollable and position it with javascript.

That is the only way to overlap this problem.