Why does the previewer render differently?

culiathomas · 2020-11-26T14:16:15.109Z

I’m trying to figure out why the UI builder renders differently in previewer mode.

This is what shows on the UI builder:

Screenshot 2020-11-26 at 8.57.29 AM1919×540 80.8 KB

And this is what I get on the previewer:

Screenshot 2020-11-26 at 8.57.39 AM1919×563 81 KB

I gave the responsiveness tutorial a try, and tried a few of the suggestions made in the 17 minute video. I then tried to look it up on the forum and could not find anything that worked for my particular case. Perhaps I overlooked some detail?

If anyone has any fixes for this, I bow to you, as you will save me so much time…

adamhholmes · 2020-11-26T14:51:13.168Z

Responsiveness can take a bit of time to get your head around, but once you do it’s not too hard to get things to display on different devices the way you want them to.

What’s the issue here specifically? I don’t see any difference (apart from the obvious screen width difference).

If you want to make the central white box keep the same width, even on a wider scree, you’ll need to set it to fixed width (or apply a max width). The same for the search box.

Otherwise, combining elements into a container group and playing around with the settings in the responsive editor window is usually the quickest way to achieve whatever it is you want.

culiathomas · 2020-11-26T14:55:17.436Z

The issue is the search box on the top right corner of the two images. In order for me to get the search box to render correctly on the previewer, I have to interlap the blue “Search” button with the actual box.

But I’m gonna give what you suggested a try and see how it goes

adamhholmes · 2020-11-26T15:00:49.733Z

Ah ok…

Yeah, trying combining both elements into a group and setting the group to be fixed width.

culiathomas · 2020-11-26T15:14:36.414Z

adamhholmes:

Yeah, trying combining both elements into a group and setting the group to be fixed width.

Awesome, that seems to work perfectly. Thank you for your help!

cmarchan · 2020-11-26T21:12:27.163Z

Bubble is a blank canvas … so folks jump right away to place elements on it. This of course is logical behaviour.

Right after your elements were combined into a container group … things worked better.

So … as you build your app think of building a structure for it. Think of this as big boxes on the page that contain smaller boxes that contain inputs, buttons, repeating groups etc.

Sort of like this:

image702×466 17.3 KB

Hope this helps!

cmarchan · 2020-11-28T15:27:14.939Z

Hello @kenna178015crook1,

Assuming that you have your page set to be responsive … the search box and button will render different depending from what viewport you are seeing your app. In other words, from what monitor size you are visiting the app.

If you group the button and the search box together and next to each other … and set that new group to be fixed width … they will render the same across any viewport size. No matter the size.

This is a responsiveness setting.