How to make this dynamic UI

Hello everyone. I have no idea to implement it. Requirement is the items which will disappear and show its hidden total when screen is increasingly narrower Ex: A,B,C,D -screen narrow-> A,B,C +1 -screen narrower-> A,B +2 Thank you everyone
No description
6 Replies
MarkBoots
MarkBoots•8mo ago
make the container display: flex with flex-wrap: wrap, set a max-height and overflow: hidden; max-height determines how many rows you want
🜲 ɢʀᴀɴᴛ
u could use media queries do some basic reading on media queries and then youll be able to do this yourself + a million other things w3schools.com does a fine job giving u the basics of media queries @Thien1311
CodeNascher
CodeNascher•8mo ago
maybe I'm misinterpreting the question, but I believe that's not what they meant (maybe style-wise, yes). It reads more like "hide some tag pills when the screen gets narrower and count the hidden tag pills" (+2 in the screenshot)
MarkBoots
MarkBoots•8mo ago
in that case JS is necessary count the childs that have an offsetTop that is larger than the height of the parent (those are the ones that are hidden with the overflow)
Thien1311
Thien1311•8mo ago
Thank for responding me, this is full its context. I want to make dynamic layout. If screen is small, the items will disappear and show total hidden items Ex: A,B,C,D -screen small-> A,B,C +1 -screen smaller-> A,B +2 ....
No description
🜲 ɢʀᴀɴᴛ
You do not need JS for that lol
Want results from more Discord servers?
Add your server