Shared Layout Settings
Use Shared Layout Settings to make sure components and groups behave the same way on all screen sizes.
Skill Level: Intermediate
Before You Begin
Make sure you understand the definitions and terms.
Make sure you have read through the previous guides.
Video
Walkthrough
1. To access the Shared Layout settings, click on a component, then click on the Layout tab.
2. In the Layout tab you will see an options window called Shared Layout Settings with a few options.
These options can change slightly based on if your selection is a group or an individual component.There are two main settings here with option for each:
Scaling: This controls how the group or component is resized when the screen size is made larger or smaller.
Anchoring: This controls how the group or component "latches onto" certain parts of the screen as it is resized.
Positioning (not visible): The location of groups or components on screen will be shared across screen sizes. Moving a group or component on one screen size will also change its location on all other screen sizes.
We'll get into more detail about these below.
3. Let's look quickly at a small decision tree to better explain which options appear in different circumstances.
NOTE: Rectangles act as auto-groups for all components inside them, except components inside the rectangle do not inherit the option to Scale with Group. For more information see the article on Grouping and Rectangles.
4. Now let's look at and define each of these option behaviors with some examples.
Scaling Options
Scaling refers to how the size of the group or component changes as the screen size grows or shrinks in width.
| Option | Description |
|---|---|
Scales with Screen | Causes groups or components to get larger or smaller based on the screen size. |
Scales with Group | Causes the component to match the scaling settings of its parent group, even if the group is set to "Stays Fixed". |
Stays Fixed | Cause the group or component size to stay the same regardless of screen size. |
Anchoring
Anchoring refers to the location of the group or component in the screen when the screen size grows or shrinks.
| Option | Description | Example |
|---|---|---|
Anchor Left (Stays Fixed) | Locks the distance between the element and the left side of the screen as it scales. Only available when "Stays Fixed" is selected. | |
Anchor Right (Stays Fixed) | Locks the distance between the element and the right side of the screen as it scales. Only available when "Stays Fixed" is selected. | |
Anchor Center (Stays Fixed) | Anchors the component to the center of the screen, but component does not resize as screen size grows or shrinks. | |
Anchor Center (Scales with Screen) | Scales the distance between the component and both sides of the screen. | |
Anchor Left and Right (Scales with Screen) | Locks the distance between the left and right sides of the screen as it scales. Only available when "Scales with Screen" or "Scales with Group" is selected. |
5. The toggles at the top of the Share Screen settings are used to "breakout" the settings for the selected group or component so that they do not share the same settings.
When toggled off, a new menu appears below allowing you to change the Scaling, Anchoring, and Positioning independently of the Shared Screen Settings.
We'll learn more about these Custom Screen Settings in the next guide.
Learn More
Turning off responsive visibility for a component or group in a specific screen size will also disable its shared screen settings for that screen size.
Check out the Responsive Apps templates when creating a new app - they can help you learn how to create the best layouts possible!
Help
If you need additional help with this article, you can always ask in our community forum or hire an Expert to help! Be sure to paste the link to this article in your post as well!
Do you have a tutorial or help doc request? Let us know!
Last updated
