Post

Putting CSS Anchor Positioning to the test by throwing dropdown menus around 💪 [popover].dropdown { top: anchor(bottom); right: anchor(right); position-try-fallbacks: flip-block,flip-inline; } That's it 👆 Keeps the menu tethered to the button (may as well bring over some hits from the other place)

Is there a way to prevent the popover from extending beyond the viewport boundaries when flipping isn't an option or isn't enough? Native inputs do this. But I struggle to reproduce this behaviour with a customisable select or popover.

yep - there's a little trick to this use clamp with the position properties so that you guard the minimum and maximum values for top, left, etc.

0 reposts1 like

No replies yet.