Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Version History

« Previous Version 2 Next »


Contents



Sizing Considerations

There are three considerations to sizing:

1. Size of the Display

Consider how the page will be viewed on different devices and how it should respond. We call this responsive design and use a combination of size and position to control this. The sizing details are covered on this page.

2. Size of Screen after Resizing

Does the entire screen fit on a display, or will the user need to scroll to see all of the screen content? 

Fit to Available Space controls how the screen fits a display:

DescriptionExample

Fit to available space is enabled = screen-centric and all content will be visible on a display. Content in this scenario will automatically resize to take up the available space.

Fit to available space is disabled = content-centric and the screen will resize to fit its content, not the display. It is advisable to set a Min Width/Height and Max Width/Height on these components/layouts to handle scenarios where there is either no data or the dataset is very large.

3. Size of the Items on the Screen

To control the size of objects on a screen, we use: 

  • Relative Sizing: sets the size relative to other objects on the screen (recommended)
  • Fixed Sizing: sets the objects to a specific size. This is typically only used for specific scenarios, such as, setting the size of a logo


Relative Sizing (Recommended)

Relative sizing sets the width and height of a component relative to other components, parent objects or its content.

Setting Sizing Relative to the Screen

All of the below options can be found on the  Styles tab.

DescriptionExample
  • To allow an object to automatically expand or shrink to fit the available space on the screen in the direction set, regardless of the size of the content  tick and  toggle on Fit to available space under Style Settings
  • This should be set on the child objects, not the parent area 
    • Content will then be viewable using a scroll bar in the object, which can be enabled by  ticking and  toggling on Show Horizontal Scrollbar and/or Show Vertical Scrollbar under Style Settings
    • If the object has siblings (objects at the same level) they will share the space in the flow direction equally

Fit to available space and Stretch (see ) are often used together to make content fill a screen.

It is important to note the following:

  • Fit to available space consumes space in line with the Direction set
  • Stretch will fill content perpendicular to the Direction set

  • To allow objects to expand to the space they need, pushing the parent container to expand beyond the screen,  untick and  toggle off Fit to available space under Style Settings
  • To control how much an object expands compared to its siblings, use a ratio in Style Settings → Grow Factor. E.g. enter 2 to allow an object to take up twice the space as its siblings
  • To specify a size that varies as the screen resizes and always occupies the same proportion of space, set a percentage in Style Settings → Width and Height with value% e.g. 75%
  • To allow objects to change their size within a minimum and/or maximum range, use the Min Width/Height and Max Width/Height fields
  • To specify the flow direction, in the parent area set Style Settings → Direction

The components in the Serene Grey palette are designed to be responsive, however, you may wish to manipulate how they respond to better suit your requirements.

Fixed Sizing

Fixed sizing is used infrequently because it will not respond to the size of a screen or its content. This should be a consideration when using this sizing.

  • To specify a fixed size in pixels, set a value in Style Settings → Width and Height
    • This is useful for logos and icons

Conditional Sizing

We can utilise Formatting Rules to conditionally set the size of components and layouts on our screens. For example, if the display of a device is below a certain size we can hide elements on the screen to make the content more readable, such as, hiding columns in a grid. Another example is the Collapsible Horizontal tile available in the Serene Grey palette, this has a conditional option that expands and contracts the tile based on the user clicking a expand button. 

Formatting rules can utilise the PhixFlow Functions to determine if the formatting rule(s) should be applied. The Internal Variables _screen and _client can be used by these functions to determine the screen size and device type a screen is being viewed on respectively. 

Further Reading

  • To set sizing settings as part of an app-wide shared style, see Screen Styling


  • No labels