[HELP/SUPPORT] Sidebar with accordion - issue with search module.

[hakeem86]

Hi guys,

I have a search module within my sidebar, and it have overflow-y: auto;overflow-x: hidden; set on the sidebar, so I get a scrollbar if the menu list it too long or screen height is not high enough.
My issue is that the search module can not escape overflow, I know that by design with overflow.
https://jsfiddle.net/adf13s6b/1/

Here is the same fiddle without overflow, but I can not see the lower part of the menu, if screen is not high enough. but here the search module escapes the sidebar
https://jsfiddle.net/adf13s6b/2/

How can it be solved? any help is appreciated

[lubber-de]

@hakeem86 I hacked this by creating two overlaying vertical menus (one for the search, one for the menu) and gave a top margin to the second one to make the search input appear. Not perfect but works so far without much more investigation.
[Edit] changed height+ z-index of first menu to make your result popup appear
https://jsfiddle.net/adf13s6b/4/

[hakeem86]

Awesome work!! many thanks

Is this maybe a bug in semantic? results div does not as minimum have the same width as category div.
https://imgur.com/a/2Mivnzx

[y0hami]

I don't think this is a bug because the search results box is within the sidebar and the sidebar has a max width and because of this the results container width: 100% will only be the max width of the sidebar but because your results are wider this leads to them forcing their width to be larger then the container.

An easy fix is to manually set the width on the results container to width: 200% or any number large enough to be bigger than the categories list.

width: 100%:

width: 200%: