Forum Documentation Showcase Pricing Learn more

Why does my group stack when it has space?

#1

In the group below, I don’t understand why my elements are stacking even though they have plenty space to stay on the same line.

I’v tried grouping, removing from group, played with alignments and widths. But nothing seems to work to fix. Any help would be greatly appreciated.

Here is the margin explanation:

#2

I’m not 100% sure how you want it to behave, it’s hard to tell from static image. Could you share a gif or perhaps editor link? A screenshot from the responsive editor could also help.

Often, these things are caused by elements having a minimum width that’s too wide. When you resize the page, one element “refuses” to shrink, and it pushes the next one down a row. Another common cause is the alignment, such as giving an icon that’s supposed to stay along the right edge a left alignment. It will try to preserve the space between them, and move down a row.

Hope that was understandable, responsive issues are a bit hard to describe in writing.

#3

Thanks for the response Petter. I am trying to get all 3 elements to remain on the same line.

Here are screen shots of the 3 elements as well as the group they are in from the responsive editor.

![22%20AM|690x425]

#4
  1. There’s no reason to check “Wrap to previous line…” if the elements are already on the same line. That is normally used to align two elements that are placed on top of each other in the editor, so that the bottom one joins the top one if the user widens the screen. For example, say you fill out an online form on mobile, you have different inpt fields, one on top of the other. If someone visits that site on desktop, you may want those fields to be next to each other instead, to use the screen width more efficiently.

  2. The problem in your case seems to be the text. It helps to see the elements as elastic, and remember the word fixed in margin: as the text is fixed width, it’s not elastic at all, and the margins are fixed. In other words, Bubble attempts to maintain the fixed margin on both sides and keep the size of the text static. There are two ways you can solve this. One is to remove the fixed width and experiment with a minimum width percentage that keeps the text readable. The second is to keep the text at fixed width, but place it within a group that’s not fixed width. That way, the group is the elastic part, and allows Bubble to squeese or stretch is to keep the elements on one line.

Was that gibberish, or understandable? :slight_smile:

#5

Thanks again Petter.

Actually, by sheer wonderful coincidence, I found the answer and complete explanation in this parallel thread via the solution posted by @fayewatson.

1 Like
#6

Glad to hear it! :metal: