How to stop elements moving when switching from Development to Preview?

How to stop elements moving when switching from Development to Preview?

I have created a Button Menu Set for my App and designed the layout thus…

However, when I switch to Preview the Menu is presented thus…

…although all the elements are set to Fixed Width and the Screen Width is set to 1920.

The actual Menu width is less than 900 pixels.

The “Hover Mouse” Text Field has no hidden carriage returns.

How do you stop elements from moving or folding?

When you preview them, you’ll see them how an end user would see them. The primary difference with the development view is that in preview mode responsive settings kick-in.

So, you’ll want to adjust the responsive settings to either make the page fixed width (usually not the solution) or (more likely) set-up responsive settings for the individual elements so that they look like you want them to on various screen widths.

There’s quite a bit of information about responsive settings in the forum. It takes a while to get familiar with the settings and they can certainly be frustrating at first. That said, once you get the hang of them, getting things to look the way you want becomes straightforward.

Hi Scott :slightly_smiling_face:

Thank you so much for that Lightning and Lucid Reply which now makes complete sense to me.

I now realise that the PC Monitor setting defaults to 1200 px which explains the folded menu Buttons.

However, that does not resolve the stretching down of the “Hover Mouse Cursor…” Text Box when there is nothing (not even a carriage return) after the single line of text in the Text Box.

Any ideas please?

Thank you again for your Help ~ I am deeply grateful.

Solved ~ Deleted and re-created the Text Box ~ Problem gone. :slightly_smiling_face: