When creating a screen, you can decide whether to use a fixed layout or a fluid layout. 

Fixed layout

A fixed layout uses a specific page size and does not change based on the size of the browser window. In other words, the page layout has fixed dimensions and its contents remained fixed no matter what. If the browser is smaller than the page, the scrollbars appear. If the browser is larger than the page, extra space appears around the page. 

Fluid layout

A fluid page uses relative units for size and positioning. Typically a fluid layout will use percentages instead of pixels, and elements will may be positioned relative to any edge or corner (not just X/Y). A fluid layout often will fill the width of the page, no matter what the width of the browser might be. 

Setting up pages to be fluid

Under the Settings for a Screen, you'll see the following Align options:

  • Fit width: the width of the screen will automatically adjust (from the width set in Editor) to width of the browser in Player. The height of screen will remain fixed to the height set in Editor. Use this setting to prototype fluid web pages
  • Fit to window: the size of the screen will automatically adjust (from the size set in Editor) to height and width of the browser in Player. Use this setting to prototype applications with independent scrolling panels. 
  • Left (fixed): the size of the screen remains fixed to the dimensions set in Editor, and the screen will display left-aligned within the browser window.
  • Center (fixed): the size of the screen remains fixed to the dimensions set in Editor, and the screen will display center-aligned within the browser window.
  • Right (fixed): the size of the screen remains fixed to the dimensions set in Editor, and the screen will display right-aligned within the browser window.

Setting up page content to be fluid

Layout options control how the size and position of an individual widget will adjust as it's parent container resizes. For example, you may want a icon to appear 10px from the the upper right corner of a section/screen, even as the section/screen is resized.

Top Left

  • Set Height and Width in pixels or percentage
  • Set the position relative to the Top and Left edges of the parent container in pixels or percentage

Top Right

  • Set Height and Width in pixels or percentage
  • Set the position relative to the Top and Right edges of the parent container in pixels or percentage. 

Bottom Left

  • Set Height and Width in pixels or percentage
  • Set the position relative to the Bottom and Left edges of the parent container in pixels or percentage. 

Bottom Right

  • Set Height and Width in pixels or percentage
  • Set the position relative to the Bottom and Right edges of the parent container in pixels or percentage. 

Center Middle

  • Set Height and Width in pixels or percentage
  • No position settings required. The element is centered vertically and horizontally. 

Center Top

  • Set Height and Width in pixels or percentage
  • Set only the distance from the Top of the container. The element is centered horizontally. 

Center Bottom

  • Set Height and Width in pixels or percentage
  • Set only the distance from the Bottom of the container. The element is centered horizontally. 

Left Middle

  • Set Height and Width in pixels or percentage
  • Set only the distance from the Left edge of the container. The element is centered vertically. 

Right Middle

  • Set Height and Width in pixels or percentage
  • Set only the distance from the Right edge of the container. The element is centered vertically. 

Top Stretch-width

  • Set only Height in pixels or percentage. The Width will dynamically adjust based the Left and Right settings.
  • Set the distance from the Top, Left, and Right edges of the container. The width will fill the space between the Left and Right values.  

Middle Stretch-width

  • Set only Height in pixels or percentage. The Width will dynamically adjust based the Left and Right settings.
  • Set the distance from the Left and Right edges of the container. The width will fill the space between the Left and Right values. The element is centered vertically. 

Bottom Stretch-width

  • Set only Height in pixels or percentage. The Width will dynamically adjust based the Left and Right settings.
  • Set the distance from the Bottom, Left, and Right edges of the container. The width will fill the space between the Left and Right values. 

Left Stretch-height

  • Set only Width in pixels or percentage. The Height will dynamically adjust based the Top and Bottom settings.
  • Set the distance from the Left, Top, and Bottom edges of the container. The height will fill the space between the Top and Bottom values.  

Center Stretch-height

  • Set only Width in pixels or percentage. The Height will dynamically adjust based the Top and Bottom settings.
  • Set the distance from the Top and Bottom edges of the container. The height will fill the space between the Top and Bottom values. The element is centered horizontally. 

Right Stretch-height

  • Set only Width in pixels or percentage. The Width will dynamically adjust based the Top and Bottom settings.
  • Set the distance from the Right, Top, and Bottom edges of the container. The height will fill the space between the Top and Bottom values. 

Stretch-both

  • No size settings required. The size will dynamically adjust based on the Top, Bottom, Left and Right settings.
  • Set the distance from the Left, Right, Top, and Bottom edges of the container.

Fluid layout in action

Set up breakpoints

You can also set up breakpoints to alter the layout or navigate based on browser dimensions. See this article for more information:
Using Breakpoints in iRise to build responsive designs

Did this answer your question?