I'm struggling with getting the grid that appears when opening a dropdown menu to be visible when containing multiple elements — specifically with dropdowns at the left of the screen. See example below:
Here's the layout with many different dropdown menus:
Here's when opening the dropdown menu for "PERC 3" — it looks great:
But when I try to open the dropdown menu for "MISC", it looks horrible and is unreadable:
I have the grid size set to [500rem, 500rem], and have the CSS from @Udo (Text size scaling with percentage - #4 by Udo) in the CSS property to make the text resize with window size. I've got the vw ratio set to .4vw.
Any ideas how I could make it so that the grid box is reasonably sized to fit everything? Is there a better option than a drop-down grid? I think my ideal would be that all grids from all the dropdowns would open the same — in the middle of the screen, with plenty of room, spacing, and padding for all text to be read, and to be fully visible on the screen. But I can't seem to figure out how to set the ultimate size that it will actually open at, and where it will open as such.
(note that I removed the dropdown icon as i couldn't figure out how to get it to ignore the CSS about sizing and it was too large and clipping the text)
Thanks in advance!