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?
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?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
