Got a tricky CSS question for any devs out there, how can I make the last chip stay in the second row without causing the first row to flow over into the icons?
Discussion
ChatGPT says:
To ensure that the last chip stays in the second row without causing the first row to flow over into the icons, you can apply the following strategies:
1. Adjust the width of the container: Increase the width of the container element that holds the chips. This will provide more horizontal space for the chips to spread out and avoid overflowing into the icons.
2. Implement responsive design: Use media queries and responsive CSS techniques to adjust the layout of the chips based on different screen sizes. This way, you can ensure that the chips are displayed appropriately on various devices without causing any overflow issues.
3. Implement line-breaking or word-wrapping: Use CSS properties like `word-wrap: break-word` or `overflow-wrap: break-word` to allow long chip labels to wrap onto multiple lines instead of overflowing. This can prevent the chips from expanding beyond the container's boundaries and affecting the layout.
4. Adjust the spacing between chips: Increase the spacing between the chips in the first row. By adding additional margin or padding between each chip, you can create more room for the chips to occupy without overlapping the icons or causing the first row to flow over.
5. Implement a maximum number of chips in the first row: Set a maximum limit on the number of chips that can appear in the first row. If there are more chips than can fit in the first row, they will automatically wrap to the second row.
By combining these strategies, you should be able to control the layout of the chips and ensure that the last chip stays in the second row without affecting the icons or causing any overflow issues.
Haha none of those solutions works
Ideally share a jsfiddle or something similar. I also don't understand well the question. You want these 5 filters to be right of "notes:", below 🔍 but without overlapping the 🔍 ?
Here's what I've got: https://jsfiddle.net/b6doumpg/
I'm giving up. Here is your answer: https://stackoverflow.com/a/68623956/969478
It's hard for me if I'm not seeing and playing with actual vode but Grid might be helpful with this 🤷
Here's a fiddle: https://jsfiddle.net/b6doumpg/
I'm currently using inline-block to get stuff to wrap
Have you tried line-clamp? https://tailwindcss.com/docs/line-clamp
I don't *think* it'll work but it's worth a quick try.
I don't get it. You want the big chip on the row above? It doesn't fit there.
That's fair. But in theory if it did, as it is it wraps too early
Not sure if you can make it work with flex box, but I found a way to make it work with inline-block elements and `float: right`. Here is a proof of concept: https://codepen.io/DanielNAF/pen/MWzybBN
Is this what you are looking for?
Correct answer has already been posted with float, but here is a solution for React Native where float isn't available. Not a pure css solution, it's a bit inelegant since it measures the elements, but I think it handles all the edge cases and works nicely.
I have no idea but chatgpt is good at this stuff. Did you try asking it? Worth a shot. I've used it to help me with CSS a lot of times!