Overflow-y cuts off dropdown content. How do I show it with overflow ?

Question

0.00/5 (No votes)

See more:

I have a dropdown inside a div.
the div has an overscroll property set to scroll.
The problem is that it cuts off the dropdown elements. If I don't apply overflow the dropdown elements appear as expected.

P.S. I cannot change the height of the div. I must achieve this without changing the height.

This is how I want :
AutoDraw[^]

This is what I am getting :

AutoDraw[^]

What I have tried:

<div style="overflow-y: scroll; height: 427px">
// dropdown inside 
</div>

Posted 29-Nov-22 20:16pm

geomukkath

Updated 29-Nov-22 22:27pm

Add a Solution

Comments

Graeme_Grant 30-Nov-22 3:44am

There is not enough information here for us to see what is happening. The best thing to do is open the developer tools in the web browser and you can debug what is happening.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2022-11-29T22:27:00

Until the popover API[^] is adopted by all major browsers - which is still a loooong way off - an element cannot escape the bounds of it's nearest ancestor block formatting context[^].

If you want a custom "drop-down" element to appear outside of the element with overflow-y:scroll set, you will need to move the dropdown element outside of the overflow element, either in the markup or by using Javascript.

(You could try using the popover polyfill[^] library; but it would almost certainly be simpler to write a specific script for your particular case instead.)

Overflow-y cuts off dropdown content. How do I show it with overflow ?

1 solution

Solution 1

Add your solution here

Preview 0

Overflow-y cuts off dropdown content. How do I show it with overflow ?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us