Semantic-ui: Dropdown inside a Sidebar not overlaying correctly

[Trouche]

A dropdown in a sidebar menu doesn't appear correctly outside of the sidebar. Instead the dropdown menu adds a scrollbar to the sidebar.

http://jsfiddle.net/d0798fgd/

[jlukic]

Sidebars can't have content escape them. This is a limitation of any container with overflow (scrollbar).

Popups work because they are children of body and not inside the sidebar.

[jlukic]

As a side note, if you need dropdowns inside of sidebars, you can do this. You just have to set overflow: visible on the sidebar, and expect it not to be able to scroll.

[wolfbiter]

@jlukic
I tried that and couldn't get it to overflow the dropdown outside of the sidebar (it only adds an x-axis scrollbar to the sidebar, which isn't very useful...)
http://jsfiddle.net/d0798fgd/
Any suggestions?

Also, huge +1 for semantic-ui! I've been a fan and a user for ~1yr now.

[jlukic]

Working example:
http://jsfiddle.net/59174tt1/2/

[xtrepo]

right but when you have multiple item in the sidebar you cannot scroll .
http://jsfiddle.net/59174tt1/26/

just found the solution from a search !

http://codepen.io/agop/pen/itbew

[phuong3030]

@Trouche You can use Popup inside Menu.Item instead.

[gringolalia]

Setting the following solved the problem.

        .ui.vertical.sidebar.menu {
            overflow: visible !important;
        }

Thank you.