Container query makes absolutely positioned elements not appear correctly
Hello there.
I am working on my university thesis project, which is a React Spotify clone. I've come to a part where the user can 'play' songs and set queues. This means that i have a container for the queue list. This container is positioned on the right side of the main container, similarly to spotify's layout. If the queue wrapper is open, the playlist table is too big, so that's why i want to hide certain columns based on the container's width. After searching on possible solutions to how to do this, i've come across the container-queries. This works fine and all, but caused the problem: some absolutely positioned elements now does not appear correctly. I think this is because the previously mentioned container-queries.
The popup should overlay the full screen, but because of the container-type: inline-size it appears like on the picture.
Is there a better way to hide columns based on container width?
5 Replies
You could try bringing the pop up the outside of container. or wrap the list separately with the container type.
Maybe it also works if you make the popup display: fixed instead of absolute. (not sure)
It would be easier for us to test if you have a running example.
Unfortunately, there is a quite complicated logic behind this, so I cannot really move the popup outside without changing too much code. The popup is already fixed, so that’s not making difference 😦
I might be able to achieve the desired look by appying the container query to the row itself instead of the list. I still need to try this.
Thanks for your suggestions!
The
position: fixed was the solution I was going to bring up also, before I saw your responseI realized
container: size; counts as parent similar as position: relative to position: absolute to position: fixed.
Maybe thats what happening here, too.That's what's happening