Need help with layout

umiumansa · 2020-08-27T13:30:30.592Z

Hi Bubblers,

Still working on my game project, I would like to improve the UI organisation + responsiveness, focusing on desktop resolution for now.

The app looks like this at the moment:

image1920×1020 520 KB

And to make it clearer, here is the same with various areas highlighted:

image1920×1020 562 KB

Grey: is the main page.
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%.

When zooming in at 110% :

image1920×1020 533 KB

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.

When zooming out to 80%

image1920×1020 444 KB

A much more acceptable situation, though:

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.

Cheers!

J805 · 2020-08-27T22:05:27.129Z

Hey @umiumansa

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.

Here are some more videos on Responsiveness: Responsive Concepts

Here are some references from Bubble that really help: Question/Discussion about Responsiveness

Hope that helps!

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

One-on-One Tutoring
eLearning Hub
Video Tutorials
No-Code Classes

umiumansa · 2020-08-28T11:27:48.829Z

J805:

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.

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?

deadpoetnsp · 2020-08-28T13:20:16.932Z

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.

J805 · 2020-08-28T16:29:54.443Z

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.

umiumansa · 2020-08-31T13:19:43.506Z

Okay I’ll give that a try. I wish Bubble had a sort of grid-based UI building where you just fit elements and in boxes.

J805 · 2020-08-31T14:17:51.050Z

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.