Layout broken & element on top of each other

Mobile Beta
1

Hi everyone !

I am trying to create an onboarding Screen with a very simple layout, a header with a question and its description, a group in which I have the possible answers, and a “next” button.

I put everything within a “content” group and I select "space between as the container alignement.

Everything is behaving fine within the editor, but as soon as I preview the app (BubbleGo or web), the whole layout is broken.

Here is what it looks like within the editor :

image
image401×854 27 KB

And here is what I have when I preview the app :

Capture d’écran 2025-02-04 à 20.00.21
Capture d’écran 2025-02-04 à 20.00.21396×859 13.5 KB

Can someone help me ? I know for sure that this layout would work perfectly fine within the classic editor, so I don’t know what to do…

Thanks,
Robin

2

Yes I’ve had the same issues it’s like the formatting is not working properly in the preview

1 Like
3

Thanks for your answer. Have you found a workaround to handle it ?

4

No unfortunately. Ive submitted a feedback but havent heard anything back yet

1 Like
5

I had this issue as well. Basically, it is because of the view type you are using. For the layout you have to work as intended, the view type has to be set to “not scrollable” and this will work.

3 Likes
6

Thank you. I’ll try this once the preview works again

7

Thanks for the solution. Tbh I don’t really understand why it actually solves the issue.

As I really want to master the mobile editor I’ll be more than happy if you could explain what’s happening and why switching to “not scrollable” is a solution.

1 Like
8

unfortunately, there are still quite a bit of bugs left. I cant seem to get a sheet to show now haha

1 Like
9

Its because a scrollable view can be infinitely long, but space between requires knowing the bounds of the container in order to calculate space between. This is one of those flexbox settings that react native does not handle well - so something we should probably remove as a setting in certain situations to be honest.

1 Like
10

Good to know ! Thanks Nick for the answer !

11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.