Hey!
I’m trying to make a dropdown which shows a list of options- I’ve set it to absolute positioning so that it shows over the content below it, but I just can’t get it to stay within the width of its parent component or even a set width.
The issue appears on the first dropdown menu.
What am I doing wrong?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi! You have to put the « filter themes-wrapper » class in position relative 
Remove the « blog-section_header » height and make « filter-by-list » position relative
Okay, maybe my message was not clear - I want the menu list to overlay all other elements on the page when opened without having to make my heading section to stretch with you workaround. Imagine that there are 30 themes in the dropdown, this would be a very visually unpleasing solution.
The issue is not with the positioning type but with the way the filter themes wrapper is growing its size and not respecting any bounds.
Removing overflow: hidden from the header section seems to work
Not really, the menu stretches out endlessly again regardless of overflow settings.
And it especially doesn’t work out if I have an element nested underneath.
bumping this still looking for a solution
can anyone please look into this? I really need to solve it
Still looking for a solution
Have you found a solution yet? Does setting the width of ‘filter themes-wrapper’ to 100% (absolute positioning) and setting its parent element to relative help?
Yes, sorry for the late response, been working a lot lately.
In my case, I had to set the position property of the parent element (fs-dropdown-1) to relative then the position of the first child (fs-dropdown-toggle-1) to relative and the position of the second child (filter themes-wrapper) to absolute with a high z-index
