View element is an integral part of interaction builder. It can be described as a canvas or a frame where all the other elements are placed and positioned.
Let's take a closer look at the View element and explore the various ways we can adjust its sizes to enhance our design. Understanding how to manipulate the dimensions of the view element, we can ensure that our content is displayed optimally, regardless of the screen size. In this section, we will discuss how we can change views dimensions, including options for setting full sizes, as well as defining minimum and maximum sizes.
Every interaction is divided into one or multiple Views. Each view by default has it's own View element than cannot be deleted.
By default, responsive View element looks like this in different devices:
Full size
It is possible to set full size (100%) to the view element. This makes the view fill any screen sizes automatically. This is useful if you for example want to add some banner at the top of the page that expands the whole width of the browser. To set the Full size for the view, follow the steps below:
- Select the view element
- Go to the Settings tab
- Under the Placement category, you can select the Full option from the dropdown. Depending on the requirement, you can set full width, full height or both.
The images below show how it looks when the view element has a full size in horizontal and vertical direction:
Minimum and maximum sizes
These sizes can be applied only to View elements, ensuring that the elements do not resize beyond the specified limits, maintaining the overall integrity of the interaction. The maximum size is modified by resizing the view element on canvas. And the minimum size is set to automatic mode by default. This means that the minimum size is calculated from the elements that you have placed to the interaction in such a way that no elements would overlap. You can override the minimum size if the automatic mode doesn't result in acceptable scaling behavior.
To set the minimum and maximum values with specific pixel amounts, follow the steps below:
- Select the view element from the blue view name badge
- Navigate to the Settings tab
- Scroll down to the Placement category, where you can find width and height settings
You will see there the fixed size and minimum and maximum fields for width and height. Either the fixed size field is active or the min and max fields (responsive mode) are active. When the fixed size mode is active the view will always have the same size no matter how much space the device has. In this mode the min and max fields have text "Not set" like in the second picture.
Alternative the width/height could be in the responsive mode which is the default. The fixed size field will display “auto,” indicating that the element now expands to the device screen within the specified range.
You can enable the fixed size mode by writing something to the first field. This causes the previous min-max information to get removed
Establishing full, minimum and maximum sizes for the view elements, allows for flexibility in design while maintaining the overall structure and integrity of the layout. This not only improves the design but also enhance the user experience across various devices.