Dark Grey: is the floating top bar that’ll host titles and menus.
Red: is the player list and stats, which is a floating group fixed top and bottom + left. Below that lays an invisible fixed-size group to prevent other items from slipping underneath.
Blue: chat + notification area, which is a floating group fixed top and bottom + right. Below is also a invisible fixed-size group to prevent other items from slipping underneath.
Green: icon tray, which is a floating group fixed bottom +left.
Yellow: a group that hosts a repeating group for the cards. The number of cards could exceed 2 rows in theory.
My current computer resolution is 1920 * 1080.
So far I am okay with the layout behavior, but there are some quirks when zooming in and out—reasonably to 110% or 80%.
The icon tray (green) is stacking icons up and takes more space than necessary. I would rather tighten icon padding or bring the left and right icon groups closer together, stretching groups inward respectively.
The yellow area, though set to stretch down to 20% stays out of the way of the blue group, but the repeating group, although it does not have a fixed width, squeezes the cards together and crops the right-most card.
The top bar is stretching down over the area, I would like it to stay up there and squeeze or hide some elements if necessary.
The chat repeating group and the chat input below do not stick to the bottom. I would like the chat input to remain at the bottom and the repeating group to stretch vertically to fill up the space.
I would really appreciate some solutions to some of these issues. This layout stuff is probably the most difficult part of building an app.
I know that Responsiveness in Bubble is difficult to understand. There are a few tricks that I use to help things go where I want them to go.
Double check your left, center and right alignments for your elements. If something is supposed to be aligned to the left, make sure it says left. Etc.
User spacers to make things shrink nicer like this video.
Use a floating group for your bottom part of your messages on the right side. That way it will always be on the bottom of the page.
Make some groups max width 100% so it doesn’t look weird on very large screens. You can group some elements and just allows the whole page to stretch but not certain elements that you want to keep toward the center.
You mean that the chat input group would be a floating group within a the blue floating group? Is that even possible? When I try that the chat input group just disappears from view.
Still, consider the chat repeating group, which displays the chat messages, how can I make it stretch downwards?
Another thing I’ve noticed is that if the width of any container is an odd number it will offset to the left or right, just change it to an even number.
I would put it outside of the floating group. Just make sure to ‘bring to front’ and it should show up above the other floating group. You can have two, just make sure it’s not ‘inside’ the other group but ‘on top’ of it instead. Meaning, don’t drag it in, use your arrow keys to place it correctly. Hope that helps.
Yeah. I can understand. I actually like the fact that I can put an element anywhere on the screen. That was the big selling point for me with Bubble. Easier to get started. Hope that works.
