Hi- I am working on the tagging system on Bubble. One thing I can’t quite figure out is the spacing in between tags.
Currently, it is evenly distributed across the total allotted space, but instead, I want it to be all squeezed toward the left. I tried adjusting the alignment in the repeating group, but it had no effect.
Does anyone know how to adjust this?
You can fix this by adjusting the justification settings in your repeating group and making sure the tags align properly. First, check that the repeating group’s layout is set to horizontal, which ensures the tags are placed in a row rather than stretched out. Then, adjust the parent group’s container alignment to “Left align” so the tags don’t space out evenly across the full width. Also, make sure the repeating group’s minimum width is set to fit its content, so it doesn’t stretch unnecessarily. If the issue persists, try placing the repeating group inside another group and setting that group’s alignment to Left. Let me know if it works!
Add a row group in your repeating group first. Once you align everything to the left check the “Apply gap spacing between elements” and add a column gap. This will help you control the space between tags.
Thank you- this solved it.
I have a follow-up question. I have two rows of tags, and the second row “cooking” because it’s a longer text, it’s extending the space on the first row between “English” and “Travel.”
Do you know how to change the setting, so the second row doesn’t affect the spacing for the first row?
Bubble tries to align everything evenly. One way to fix this is by setting a fixed width for each tag and enabling the “shrink when text is shorter” option so the tags don’t stretch too much. Another option is to adjust the parent group’s layout settings so make sure it’s set to a row container with vertical wrapping allowed. This will help keep each row independent. If you’re comfortable using a little CSS, you can also add a small piece of code to control spacing and prevent longer tags from pushing others around.
.tag-container { display: flex; flex-wrap: wrap; gap: 5px; /* Adjusts spacing between tags */ align-items: flex-start; } .tag { white-space: nowrap; /* Prevents text from wrapping inside a tag */ padding: 5px 10px; border-radius: 8px; background-color: #a0b68e; color: white; display: inline-block; }To use this, make sure your tags are inside a container (like a Group) and give that container the class tag-container. Then, apply the tag class to each tag. This will ensure proper spacing between tags while keeping each row independent.
This topic was automatically closed after 70 days. New replies are no longer allowed.
