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
6 Replies
make the container
display: flex with flex-wrap: wrap, set a max-height and overflow: hidden;
max-height determines how many rows you wantu 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
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)
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)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 ....
You do not need JS for that lol