🔧 Fixing the overflow hidden for dropdowns/tooltips etc

🕛 Zeit seit Veröffentlichung: 55 Tage, 16 Stunden 12 Minuten
📆 Veröffentlicht am: 11.10.2024 um 10:59 Uhr
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

Have you ever tried to create a dropdown for your button, select but then getting blocked by overflow hidden?

Then what do you do, well then you reach for javascript to throw the element to the root of the DOM and then position the element based on the trigger elements rect, recalulating everytime layout changes, scrolling og resize window happens, not very effective.

I wanna start by saying it dosn't have full support yet, but there is a polyfill to solve that for now.

The two main features we're gonna rely on are

anchor-positioning

popovers

So my initial idea came when I saw the dialog are sent to the root but with DOM layer. I stumpled across the popover api where you basically get the same logic but just acts slightly different.

I also remember seeing a post about anchoring an element to a thumb on a range slider.

Then i thought basically what you wanna do for any dropdown/tooltip etc that needs to break overflow hidden if you mix the two you didn't need all the excessive javascript.

So here is a working demo in the browsers that support it

• Chrome, Edge v125+
• Opera v111+
• Chrome for Andriod, Andriod browser v129+

Okay so what if you wanna use it today. Well there is a polyfill for that that we can use.

The oddbird/css-anchor-positioning polyfill

Which has great Browser Support

• Firefox 54+
• Chrome 51+
• Edge 79+
• Safari 10+

Try visiting a browser not mentioned in the non polyfill example and this example below works, I have personally tested the latest versions of safari and firefox

This means that yes in most browsers we're going to have the extra computed overhead but its easy to use and toggle off when we have sufficient compatability.

...