position absolute inside overflow scroll container
This is normal css behavior, however sometimes we need to allow certain dropdowns to go outside scrollable container (think datepicker inside scrollable modal OR context menu dropdown inside scrollable table).
How to circumvent this, I'm open to JS solution as well as I doubt it can be solved with css only.
21 Replies
In this example you can see datepicker is cut off on left side by modal which is set as
overflow-y: autoBit hard to understand the question without (live) code. It seems the date picker shows 2 full month, so i don't understand what is 'cut off'.
You could try and see what position: absolute or fixed does.
this is when modal is set to
overflow-y:visible
those are shortcuts for date picker, I understand first pic on its own was confusing
why does the model need an overflow-y hidden?
it needs auto (or scroll)
as modal is vertically scrollable based on content size
ah okay. yea, then make the date picker display: fixed, and calculate in js where it should be placed
ok, can you elaborate on how I should calculate correct position, if it is position fixed now?
in js you can use
Element.getBoundingClientRect() to get the position and size of your drop down, then place the datepicker accordingly with top, left positionare you saying I should get position of select element itself (input field so to speak)?
if you want to align the datepicker to the bottom right of the select
get the x y position (bottom right)
x: element.x + element.width
y: element.y + element.height
here more about getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
Element.getBoundingClientRect() - Web APIs | MDN
The Element.getBoundingClientRect() method returns a
DOMRect object providing information about the size of an element and its
position relative to the viewport.
ok, I think I get it, thanks, its very much appreciated 😉
so this is the only way , to use fixed?
yea, if you really can not get around of the overflow. I think so
I had some idea like to somehow track if select is open, and if its open, I replace overflow: auto with overflow: visible, so it does not contain absolute elements anymore
your solution is better to not make modal jerky (showing scrollbar and removing scrollbar)
again, hard to tell without live code
if you can make a codepen, it would really help
Thanks, I will try your solution to make it work, appreciated 😉
I think if you set
position: relative on the grandparent of the datepicker, and then position: absolute; on the datepicker, it'll pull it out of the parent and that would let it overflow the parent's side.
what I'm a bit confused about though is that overflow-y is messing with the x overflow
but again, both are very hard without live code to mess around withyea was thinking that too, but i suspect the container already is relative
hm, yeah, that'd be a deal killer
i was thinking maybe just put the datepicker in a modal centered on the screen.