What am I doing wrong?

[JayGoo83]

I'm trying to create a new screen, where there is a header at the top with an image, then another "row" which the name of the program, then another row which has search inputs, and then another row for displaying the data. Sometimes the screen doesn't match up with what i'm seeing in the designer. Some times i put a button on the designer screen and when i look at it in preview its either off the page or on top of another element. Am i supposed to start with a certain widget? I tried starting with a simple container layout and setting that width to %100 and then creating new simple container layouts within the main container. Is that not what i am supposed to do?

[Scott Klement]

It sounds like you're positioning your elements based on a percentage of the display so that it can adapt to different display sizes. This involves coding things so that when the size of the viewport changes, the widgets appear in different locations. This sometimes means that some of it is in a location you didn't expect. Since the designer's canvas display is smaller than the runtime's, things are positioned differently at runtime vs. design-time. Is that an accurate description of your situation?

This type of coding can be tricky, and involves testing on the different display sizes you intend to support to make sure things aren't positioned poorly. The Visual Designer has a 'Design' tab with a 'Canvas Size' dialog that can make it easier to test different display sizes.

If you don't need to adjust to different display sizes, then I don't recommed using percentages, they make coding far more difficult.

You could also look into using the Responsive Layout to give you more control.

[JayGoo83]

Thanks Scott. So is the best method to start having a layout with a fixed width, and then having inside containers also with fixed widths for what i need to display? I am trying to mimic the styling of a production B2C site, and the programs I am writing are for internal users, but we want the look and feel to carry over from the B2C site.