Hello, I am trying to create a menu type page and I’m using a repeating group. I’m having a problem though where the 3rd column has weird spacing that throws the content down to the next line. Any idea on what I’m doing wrong?
Hi Yaggienick, Welcome!
Can you post a screen shot of what this looks like in the responsive tab of the design screen?
This looks very much like a responsive issue (for instance, the margin of the text object is fixed to the left and thus forcing a line break because it’s running out of margin on the right). Or, it could simply be that the RG, its parent group, or the page are simply not wide enough at whichever breakpoint you are hitting in your browser.
more info on bubble responsive settings: https://vimeo.com/169882386
Thanks for the reply. I may have miscategorized this question because my page is set to fixed width, so no responsive settings to show. My text elements are set to cut off the content if the element is not tall enough.
Here is the Appearance tab
are any of the elements within the page set to be not fixed width?
based on the original pic, you’re getting extra margin around the image which is causing image + text to exceed the width of the cell.
Are the image and text contained within a Group element or just dropped side by side in the RG cell?
(there are folks on here who are way more knowledgeable than I and they would say that if you could share a link to the editor and/or the page in question it would be super helpful: Settings --> General --> Application Rights --> Everyone can view)
I appreciate all the help! All elements are set to fixed width. The items in my repeating group were not grouped, but after grouping I get the same issue.
Here is a link for the public view: Privachef | Bubble Editor
Thanks,
I don’t know the ‘why’ yet, but your separator shape is getting a huge left offset applied to it in the browser:
Basically, it’s getting pushed over to the right nearly 300px when it’s in the 3rd column.
Is it super important to have that separator be a shape?
You might try grouping the text + button and then applying a left border with 4px width and the gray color? you can use h padding within the text element to get the spacing you currently have
Don’t know, spit balling here while I cruise through your design
sigh that eliminates all the easy things I can think of…busy replicating your design (sans data of course) in my instance to see if I can replicate the issue and diagnose.
Out of curiosity, how many recipes in your db right now, just the 9 I can see on the page?
Yes, I just started using Bubble today. Just working with that set of 9.
ok, it’s almost certainly the scroll bar wonking things up.
Can you change your RG from Vertical Scrolling to Ext. Vertical Scrolling and see if that clears it up?
So I just deleted every element and then readded them 1 by 1 in to a new group this time and its working.
ahh looks beautiful. I’m not sure what was causing that problem, but I really appreciate all the effort you put in. Gold star for you man!
1 Like
Well, that’s wild.
FYI, it looks like when you use vertical scrolling (as opposed to ext. vertical scrolling) bubble reserves space on the inside of the RG for the scrollbar … I saw your exact issue when recreating your layout in my app and resolved it by switching to ext. vertical scrolling
1 Like
Happy that it’s working now! (less happy that we don’t really know why)
also, feel free to make your app editor private again 
1 Like
This topic was automatically closed after 70 days. New replies are no longer allowed.