is it possible to align div below other div even if they arent under same parent?
I'd like to know if its possible with css, I dont think so. but just in case asking here!
for example in the select component, the dropdown will be in a
portal so not under the same parent, so I think ive to get the trigger button's position and then make the dropdown aligned below it using top
17 Replies
just give it 100% width.
here's an example:
https://jsfiddle.net/y6j1xhrc/
as you can see, the width of the
<p> is the same as the width of the .x elementDisplay two grid columns with background colors - JSFiddle - Code P...
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
as long as the dropdown element has
position: relative, your position: absolute element will take the 100% from the parent elementthats not what i wanted!
the dropdown isnt under the same parent
its rendered in a portal so for example the body element
then put the
position: relative in whatever element is the "parent"
you can also try something with sub-grid
i can't tell you if it will work because i never tried it
alternatively, just js it
ya thats the only solution ig
or just hard-code everything
or use css variables for the width
width isnt the concern but the positioning is
why don't you move the
<ul> under the <button>?
or ... <details>?cuz it needs to be rendered outside the parent div
why?
oh, ai slop
the true source of truthness
all JS UI libs are using portal
for custom <select>
they render the dropdown div somewhere else
so it wont get affected by the parent style of the <button>
you will have to set the position in js, just like jquery used to do
or maybe try something with the popup api
probably you can get something to work with it
but the support is still ... flaky
https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
yea seen this
idk how many years it'll take to make it stable 😭
looks mostly done
i wouldn't use it without a fallback/polyfill for the next 2 years
Popover is already stable, but you also will need Anchor which isnt.