Why does the previewer render differently?

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

This is what shows on the UI builder:

And this is what I get on the previewer:

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…

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.

1 Like

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

Ah ok…

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

2 Likes

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

2 Likes

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:

Hope this helps! :+1:

4 Likes

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.