# Fixed edges functionality

> Use the Fixed edges property in Form designer to anchor, stretch, or scale components relative to the form root. Describes the Top, Bottom, Left, Right, Both, and Scale options with examples.

Use this feature to automatically scale your forms up to the size or zoom of the screen, or to position components in an absolute way. For example, make a Map fill the entire screen, make a Line component strecth to the width of the form, or make one section have a fixed size while the section below fills the rest of the available space.

_Define the dimensions of the form root as prerequisite_: In [Form designer](form_designer.md), click on any part of the form canvas, go to **Properties**, and adjust the _width_ and _height_ so that the components on the form (panels, sections, etc.) are positioned within those dimensions. You will notice when this is done if a _red frame_ surrounds all components. Save the form.

After that, select the desired component, go to **Properties**, and choose a combination of **Fixed edges**. The _options_ are the following:

-   **Top**. _Default_ option for horizontal edge. The component is positioned relative to the top edge of the defined form root.

-   **Bottom**. For horizontal edge. The component is positioned relative to the bottom edge of the defined form root, design mode and form can differ with this setting.

-   **Left**. _Default_ option for vertical edge. The component is positioned relative to the left edge of the defined form root.

-   **Right**. For vertical edge. The component is positioned relative to the right edge of the defined form root, design mode and form can differ with this setting.

-   **Both** (**stretch**). The component is stretched relative to the edges of the defined form root.

-   **Scale**. The component is scaled relative to the defined form root.

> **Note:**
> 
> A component with default options will be rendered with no changes.

## Examples

In the image below, observe how the components are distributed within the red frame defined as form root in Form designer. Then notice how the components render when zooming in and out, depending on their Fixed edges' options: some of them strecht, scale, and/or keep in a fixed position.

![FixedEdgesE1](_images/fixed_edges_functionality/FixedEdgesE1.png)

In the following image, the top section has the combination "Both (strech)" - "Both (strech)" and is rendered streched keeping its position respect to the form root frame. The bottom left section has the combination "Bottom" - "Both (strech)" which means that it will render with a fixed position at the bottom of the screen but stretching as much to the right as possible, automatically applying the horizontal bar if necessary, since columns do not support Fixed edges. The bottom right section has the options "Bottom" - "Right" which keep it steady in that corner.

![FixedEdgesE2](_images/fixed_edges_functionality/FixedEdgesE2.png)