Recently, I’ve been experiencing a weird bug with my groups, and I’m wondering if anyone else has run into this issue. I’m not sure what’s causing it to find a fix.
My group looks like this:
I load the app, and sometimes it comes in looking like this:
When I reload the page, sometimes it fixes the issue. Other times it does not. This happens across every group in this app and others I have.
I also have a repeating group which is well organized, and pretty. In the editor it looks like this:
When it actually loads in, it looks like this:
For the life of me, I can’t seem to find what caused it. I have tried setting all elements in the group to fixed widths, adjusting the page size, the element positions. Nothing seems to load it the way it is built in the editor. This only happens with a repeating group.
Is your browser’s zoom set to 100% both in the editor (when you’re making edits / saving) and as a user when viewing the app?
When the zoom isn’t 100%, this can throw Bubble’s rendering engine off.
Thanks. It is set at 100% in both views. I never change it.
Have you set up responsive settings?
No, I haven’t done anything on the responsive settings yet. I have the page set at full width, as well.
Okay, this sounds like a responsive issue then. When the screen is different widths Bubble will move items on the page, in theory, so that the content fits the size of the browser. But, the catch is, responsive almost always looks horrible until you set it up.
You can test this by going to responsive in the editor and sliding the screen width. If it’s showing you the same funny looking sizing, etc. in the responsive section then the solution is adding responsive settings.
Bubble has a quick tutorial on the subject. Additionally, the keys to getting it to do what you want are: 1) adjust which items are fixed width vs. not, 2) set them to align left, center, or right as desired, and 3) put items in groups when you want them to move together.
It takes a while to get the hang of it, but nothing too crazy.
The problem there is that, since the page is fixed width, responsive settings don’t apply. You can’t even change responsive settings on a fixed-width page. I really appreciate your input, though. It was one of the first things I looked at.
Fixed width or full width? …you had said full width (where responsive applies).
Sorry for any confusion. The elements are fixed width. The page is full width. Responsive can’t be changed on a full width page.
Okay, hmmm… do you have any custom code? or, any html elements that could have broken html within them? or, perhaps code in the header that might be broken?
None of the above. Things are pretty basic. Just bubble elements and workflows.
I’d submit it as a bug then.
