Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popout Menu is not visible outside of a scrollable area #154

Open
elis opened this issue Feb 4, 2014 · 3 comments
Open

Popout Menu is not visible outside of a scrollable area #154

elis opened this issue Feb 4, 2014 · 3 comments

Comments

@elis
Copy link

elis commented Feb 4, 2014

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:

bad-popout

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
Copy link
Collaborator

acmetech commented Feb 4, 2014

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

@todc
Copy link
Owner

todc commented Feb 4, 2014

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
Copy link

birkir commented Feb 7, 2014

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants