Shared Layout Settings
Use Shared Layout Settings to make sure components and groups behave the same way on all screen sizes.
Last updated
Use Shared Layout Settings to make sure components and groups behave the same way on all screen sizes.
Last updated
Skill Level: Intermediate
Make sure you understand the definitions and terms.
Make sure you have read through the previous guides.
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.
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.
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 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. |
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.
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!
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!
