Overflowing tags indicator (+ x more)
front-endHello!
So I've been struggling to come up with a reasonable solution to building this design that didn't feel silly or excessive.
I've build a very basic example of what I'm trying to achieve for the screenshot. Basically, there may be an arbitrary number of tags and I want to display as many as possible in a single line, and then put any that would overflow into some kind of menu when you hover over the "+ X more" pill.
I'm trying to come up with a reasonable approach for cleanly cutting off the content while leaving enough room for the overflow pill and being able to collect all the items that need to be displayed in the overflow menu.
The main approach I've tried is adding items one at a time, checking for overflow, once overflow occurs, add the pill, check for overflow again. This may just be the best approach, but I don't like how much guess-and-checking is involved, and it inherently means there will be a layout shift as it settles in. I can mitigate this by making it have 0 opacity until the calculations are complete, and then animating it in, but it still feels messy and not as polished as I would like.
Am I overlooking a simpler approach where I can lean on CSS/the browser more?
Thanks!!
So I've been struggling to come up with a reasonable solution to building this design that didn't feel silly or excessive.
I've build a very basic example of what I'm trying to achieve for the screenshot. Basically, there may be an arbitrary number of tags and I want to display as many as possible in a single line, and then put any that would overflow into some kind of menu when you hover over the "+ X more" pill.
I'm trying to come up with a reasonable approach for cleanly cutting off the content while leaving enough room for the overflow pill and being able to collect all the items that need to be displayed in the overflow menu.
The main approach I've tried is adding items one at a time, checking for overflow, once overflow occurs, add the pill, check for overflow again. This may just be the best approach, but I don't like how much guess-and-checking is involved, and it inherently means there will be a layout shift as it settles in. I can mitigate this by making it have 0 opacity until the calculations are complete, and then animating it in, but it still feels messy and not as polished as I would like.
Am I overlooking a simpler approach where I can lean on CSS/the browser more?
Thanks!!
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
