Fixed edges

Fixed edges is a functionality released in the Spring 2020 release. It enables a higher screen usage, and can be activated for both new and existing forms. Fixed edges is supported by all section types, and we are working to also enable support for all components.

How does it work?

A prerequisite for using fixed edges is a sized surface which sections and components can relate to. This surface is defined in the form designers property panel in the group Layout, setting Dimensions (width and height). When this surface is defined and saved, each section and component can relate to the surface, and be positioned with the different options that exist for each edge. In order for secitons and components to scale and stretch in a predictable manner the surface should enclose the sections and components like a picture frame.

Edge options

The edges of sections or components can be set as fixed with the following options:
  • Top
    default, only for horizontal edge
    the section/component is positioned relative to the top edge of the defined surface, the normal positioning setting
  • Bottom
    only for horizontal edge
    the section/component is positioned relative to the bottom edge of the defined surface, design mode and form can differ with this setting
  • Left
    default, only for vertical edge
    the section/component is positioned relative to the left edge of the defined surface, the normal positioning setting
  • Right
    only for vertical edge
    the section/component is positioned relative to the right edge of the defined surface, design mode and form can differ with this setting
  • Both (stretch)
    the section/component is stretched relative to the edges of the defined surface
  • Scale
    the section/component is scaled relative to the defined surface
A section or component with default values will be rendered as before when the surface has been designed.

Example

The below clip shows a form in design mode, which can be revealed looking at the dashed line separating the canvas and the button row. The red edge to the right and in the bottom show the edges of the defined surface, which is used in positioning of the sections and components. The rectangles used in the example have each been given a label placed in front of/above, which in all but one case have the same settings as the rectangle. fixed edges design mode Viewing the form when the screen size is similar to the defined surface, the components will be placed according to the clip above. In the clip below the screen is both wider and taller than the defined surface. fixed edges view The positioning is also used wheen the screen is smaller than the defined surface, which is shown in the clip below where the screen is both thinner and shorter than the defined surface. fixed edges small screen Another example with table sections is shown in the clip below. Table columns have no fixed edges options. fixed edges table small screen In the below clip the above table is shown on a larger screen. Since the sections are placed edge to edge with the defined surface, all sections are scaled with no space inbetween. fixed edges table large screen