# Layout Component

The Layout component is currently being beta-tested.

## Overview

Thunkable’s Layout component allows for more precise positioning of UI components on an app screen, by allowing you to position UI components dependent on other UI components on the screen. For example, in a typical sign-in screen, if a user inputs an incorrect email address or password, a screen built with a Layout component allows you to shift the UI components on the screen to display the error messaging to the user. 

## Add a Layout to a Screen

To add a Layout to a screen:

1. Drag and drop the Layout UI component onto a screen. You’ll notice it is composed of two Containers, one on top of the other. 
2. Click and drag the sizing handles in the corners to resize the Layout UI component. 
3. Click and drag to reposition it.

<figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F7jvdE4sUENQUsGZYVjKX%2Fadd%20Layout%20component%20gif.gif?alt=media&#x26;token=d324bf8c-92fa-4818-b1f8-245b3b40d4cb" alt=""><figcaption></figcaption></figure>

## Insert Additional Containers

By default, a newly added Layout has two horizontal Containers arranged vertically, one on top of the other. To insert additional Containers to a Layout:

1. Click to select the Layout UI component in the component tree or within the screen.
2. At the top of the Layout’s properties panel, select whether you want to insert a Horizontal or Vertical Container.\
   ∙ **Horizontal Container** - UI components within the Container are aligned horizontally, side by side\
   ∙ **Vertical Container** - UI components within the Container are aligned vertically, on top of each other
3. Identify into which Layout or Container you want to insert the new Container.
4. Click **Add**. &#x20;

## Add UI Components

To add UI components to a Layout:

1. Drag and drop UI components into a Container on a screen.&#x20;
2. Once UI components are in a Container, rearrange their order by dragging and dropping their component names in the component tree.\ <br>

   <figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F8XFchywKzuLy53bSrdSq%2Fmove%20components%20in%20tree.gif?alt=media&#x26;token=a7753a06-5952-4e24-8c1a-2bb4726bb216" alt=""><figcaption></figcaption></figure>

## Layout Properties

The following properties are configured on the right in the Layout's properties panel.&#x20;

{% tabs %}
{% tab title="Alignment " %}

| Property                        | Value         | Description                                                                                                                                                                                                                                                      |
| ------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Direction                       | vertical      | The elements directly within the Layout (could be a UI component or a Container) are aligned vertically, on top of each other.                                                                                                                                   |
| Direction                       | horizontal    | The elements directly within the Layout (could be a UI component or a Container) are aligned horizontally, side by side.                                                                                                                                         |
| Vertical / Horizontal Alignment | top           | The elements directly within the Layout (could be a UI component or a Container) are positioned at the top of the Layout.                                                                                                                                        |
| Vertical / Horizontal Alignment | bottom        | The elements directly within the Layout (could be a UI component or a Container) are positioned at the bottom of the Layout.                                                                                                                                     |
| Vertical / Horizontal Alignment | left          | The elements directly within the Layout (could be a UI component or a Container) are positioned at the left of the Layout.                                                                                                                                       |
| Vertical / Horizontal Alignment | right         | The elements directly within the Layout (could be a UI component or a Container) are positioned at the right of the Layout.                                                                                                                                      |
| Vertical / Horizontal Alignment | center        | The elements directly within the Layout (could be a UI component or a Container) are positioned in the center of the Layout (either top to bottom or left to right, depending on the selected direction).                                                        |
| Vertical / Horizontal Alignment | space-between | The elements directly within the Layout (could be a UI component or a Container) are positioned with an equal amount of space between them.                                                                                                                      |
| Vertical / Horizontal Alignment | space-around  | The elements directly within the Layout (could be a UI component or a Container) are positioned with an equal amount of space between them, including at the top and bottom for a vertical direction Layout or left and right for a horizontal direction Layout. |
| Scrollable                      | true/on       | The user can scroll within the Layout.                                                                                                                                                                                                                           |
| Scrollable                      | false/off     | The user cannot scroll within the Layout.                                                                                                                                                                                                                        |
| Scroll Bar Visible              | true/on       | The scroll bar is visible to the user.                                                                                                                                                                                                                           |
| Scroll Bar Visible              | false/off     | The scroll bar is not visible to the user.                                                                                                                                                                                                                       |

**Horizontal Alignment Examples**

<figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FheOiRdwG6TB3UWYiv2iy%2Flayout-horizontal%20alignment-v2.png?alt=media&#x26;token=5ce10986-faac-4d06-8d09-3c3e964ada84" alt=""><figcaption></figcaption></figure>

**Vertical Alignment Examples**

<figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FFFbxqsK5rPZSI8VS4pTi%2Flayout-vertical%20alignment.png?alt=media&#x26;token=83ebd517-3db3-411c-8997-70023bb3f8e3" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Layout" %}

<table><thead><tr><th width="158.66666666666666">Property</th><th width="186">Value</th><th>Description</th></tr></thead><tbody><tr><td>X</td><td>coordinate value</td><td>Position of the upper left corner of the Layout on the X-axis, where the left side of the screen is X=0.</td></tr><tr><td>Y</td><td>coordinate value</td><td>Position of the upper left corner of the Layout on the Y-axis, where the top of the screen is Y=0.</td></tr><tr><td>Height</td><td>number in pixels</td><td>The Layout’s height is defined by a custom number of pixels.</td></tr><tr><td>Width</td><td>number in pixels</td><td>The Layout’s width is defined by a custom number of pixels.</td></tr><tr><td>Resize Mode</td><td>Stretch</td><td>Stretches the Layout to fit the dimensions of the device's screen.</td></tr><tr><td>Resize Mode</td><td>Float in Place</td><td>Renders the Layout in the same aspect ratio as the design, regardless of the device size.</td></tr></tbody></table>
{% endtab %}

{% tab title="Image" %}

| Property                       | Value        | Description                                                                                                         |
| ------------------------------ | ------------ | ------------------------------------------------------------------------------------------------------------------- |
| Background Picture             | Upload files | Click to upload an image file.                                                                                      |
| Background Picture             | Type in URL  | Type in an image URL.                                                                                               |
| Background Picture Resize Mode | cover        | Fills the entire Layout without changing the height and width ratio of the image.                                   |
| Background Picture Resize Mode | contain      | The entire image is scaled down to fit inside the Layout, without changing the height and width ratio of the image. |
| Background Picture Resize Mode | stretch      | The image's height will change to fill the Layout length-wise.                                                      |
| Background Picture Resize Mode | repeat       | The image repeats to cover the Layout. The image's height and width ratio do not change.                            |
| Background Picture Resize Mode | center       | The image is positioned in the middle of the Layout.                                                                |
| {% endtab %}                   |              |                                                                                                                     |

{% tab title="Style" %}

<table><thead><tr><th width="196">Property</th><th width="183.66666666666666">Value</th><th>Description</th></tr></thead><tbody><tr><td>Visible</td><td>visible</td><td>Users can see the Layout.</td></tr><tr><td>Visible</td><td>invisible</td><td>Users cannot see the Layout.</td></tr><tr><td>Background Color</td><td>color</td><td>The background color of the Layout.</td></tr><tr><td>Border: Style</td><td>solid</td><td>The Layout’s border is a solid line.</td></tr><tr><td>Border: Style</td><td>dotted</td><td>The Layout’s border is a dotted line.</td></tr><tr><td>Border: Style</td><td>dashed</td><td>The Layout’s border is a dashed line.</td></tr><tr><td>Border: Color</td><td>color</td><td>The Layout’s border is the color selected. </td></tr><tr><td>Border: Width</td><td>number in pixels</td><td>The width of the Layout’s border is defined by a custom number of pixels.</td></tr><tr><td>Border: Radius</td><td>number in pixels</td><td>The radius of the Layout border’s corners is defined by a custom number of pixels.</td></tr><tr><td>Shadow: Color</td><td>color</td><td>The Layout’s shadow is the color selected. </td></tr><tr><td>Shadow: Opacity</td><td>number between 0 and 100</td><td>The opacity of the Layout’s shadow. </td></tr><tr><td>Shadow: Radius</td><td>number in pixels</td><td>The radius of the Layout shadow’s corners is defined by a custom number of pixels.</td></tr><tr><td>Shadow: Offset</td><td>number in pixels</td><td>How far the Layout’s shadow should be offset, in height and width, is defined by a custom number of pixels.</td></tr></tbody></table>
{% endtab %}

{% tab title="Spacing" %}

<table><thead><tr><th width="166">Property</th><th width="101.66666666666666">Value</th><th>Description</th></tr></thead><tbody><tr><td>Margin</td><td>top</td><td>The margin between the Layout’s top border and the next UI component as defined by a custom number of pixels.</td></tr><tr><td>Margin</td><td>bottom</td><td>The margin between the Layout’s bottom border and the next UI component as defined by a custom number of pixels.</td></tr><tr><td>Margin</td><td>left</td><td>The margin between the Layout’s left border and the next UI component as defined by a custom number of pixels.</td></tr><tr><td>Margin</td><td>right</td><td>The margin between the Layout’s right border and the next UI component as defined by a custom number of pixels.</td></tr><tr><td>Padding</td><td>top</td><td>The padding between the Layout and its top border as defined by a custom number of pixels.</td></tr><tr><td>Padding</td><td>bottom</td><td>The padding between the Layout and its bottom border as defined by a custom number of pixels.</td></tr><tr><td>Padding</td><td>left</td><td>The padding between the Layout and its left border as defined by a custom number of pixels.</td></tr><tr><td>Padding</td><td>right</td><td>The padding between the Layout and its right border as defined by a custom number of pixels.</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

## Container Properties

The following properties are configured on the right in the Container's properties panel.&#x20;

{% tabs %}
{% tab title="Alignment" %}

<table><thead><tr><th width="212">Property</th><th width="123.66666666666666">Value</th><th>Description</th></tr></thead><tbody><tr><td>Direction</td><td>vertical</td><td>UI components within the Container are aligned vertically, on top of each other.</td></tr><tr><td>Direction</td><td>horizontal</td><td>UI components within the Container are aligned horizontally, side by side.</td></tr><tr><td>Vertical / Horizontal Alignment</td><td>top</td><td>UI components are positioned at the top of the Container</td></tr><tr><td>Vertical / Horizontal Alignment</td><td>bottom</td><td>UI components are positioned at the bottom of the Container</td></tr><tr><td>Vertical / Horizontal Alignment</td><td>left</td><td>UI components are positioned at the left of the Container</td></tr><tr><td>Vertical / Horizontal Alignment</td><td>right</td><td>UI components are positioned at the right of the Container</td></tr><tr><td>Vertical / Horizontal Alignment</td><td>center</td><td>UI components are positioned in the center of the Container (either top to bottom or left to right depending on the selected direction)</td></tr><tr><td>Vertical / Horizontal Alignment</td><td>space-between</td><td>UI components are positioned with an equal amount of space between them</td></tr><tr><td>Vertical / Horizontal Alignment</td><td>space-around</td><td>UI components are positioned with an equal amount of space between them, including at the top and bottom for vertical direction Containers or left and right for horizontal direction Containers</td></tr><tr><td>Scrollable</td><td>true/on</td><td><p>The user can scroll within the Container. </p><p>Note: When setting a Container as scrollable, we recommend the size of the UI components within it are set to an absolute pixel value or Fit Contents.</p></td></tr><tr><td>Scrollable</td><td>false/off</td><td>The user cannot scroll within the Container. </td></tr><tr><td>Scroll Bar Visible</td><td>true/on</td><td>The scroll bar is visible to the user.</td></tr><tr><td>Scroll Bar Visible</td><td>false/off</td><td>The scroll bar is not visible to the user.</td></tr></tbody></table>

**Horizontal Alignment Examples**

<figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FheOiRdwG6TB3UWYiv2iy%2Flayout-horizontal%20alignment-v2.png?alt=media&#x26;token=5ce10986-faac-4d06-8d09-3c3e964ada84" alt=""><figcaption></figcaption></figure>

**Vertical Alignment Examples**

<figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FFFbxqsK5rPZSI8VS4pTi%2Flayout-vertical%20alignment.png?alt=media&#x26;token=83ebd517-3db3-411c-8997-70023bb3f8e3" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Layout" %}

<table><thead><tr><th width="128.33333333333334">Property</th><th width="138">Value</th><th>Description</th></tr></thead><tbody><tr><td>Height</td><td>Fit contents</td><td>The Container’s height is the same as the tallest UI component or Container within it (horizontal direction) or the stacked UI components or Containers within it (vertical direction).</td></tr><tr><td>Height</td><td>Fill container</td><td>The elements directly within the Container (could be a UI component or another Container) fill the Container vertically. </td></tr><tr><td>Height</td><td>Size (e.g. 50px or 50%)</td><td>The Container’s height is defined by a custom number of pixels or percentage of the screen.</td></tr><tr><td>Width</td><td>Fit contents</td><td>The Container’s width is the same as the widest UI component or Container within it (vertical direction) or the side-by-side UI components or Containers within it (horizontal direction).</td></tr><tr><td>Width</td><td>Fill container</td><td>The elements directly within the Container (could be a UI component or another Container) fill the Container horizontally. </td></tr><tr><td>Width</td><td>Size (e.g. 50px or 50%)</td><td>The Container’s width is defined by a custom number of pixels or percentage of the screen.</td></tr></tbody></table>
{% endtab %}

{% tab title="Image" %}

| Property                       | Value        | Description                                                                                                         |
| ------------------------------ | ------------ | ------------------------------------------------------------------------------------------------------------------- |
| Background Picture             | Upload files | Click to upload an image file.                                                                                      |
| Background Picture             | Type in URL  | Type in an image URL.                                                                                               |
| Background Picture Resize Mode | cover        | Fills the entire screen without changing the height and width ratio of the image.                                   |
| Background Picture Resize Mode | contain      | The entire image is scaled down to fit inside the screen, without changing the height and width ratio of the image. |
| Background Picture Resize Mode | stretch      | The image's height will change to fill the screen length-wise.                                                      |
| Background Picture Resize Mode | repeat       | The image repeats to cover the screen. The image's height and width ratio do not change.                            |
| Background Picture Resize Mode | center       | The image is positioned in the middle of the frame.                                                                 |
| {% endtab %}                   |              |                                                                                                                     |

{% tab title="Style" %}

<table><thead><tr><th width="191.66666666666666">Property</th><th width="158">Value</th><th>Description</th></tr></thead><tbody><tr><td>Visible</td><td>visible</td><td>Users can see the Container.</td></tr><tr><td>Visible</td><td>invisible</td><td>Users cannot see the Container.</td></tr><tr><td>Background Color</td><td>color</td><td>The background color of the Container.</td></tr><tr><td>Visible</td><td>solid</td><td>The Container’s border is a solid line.</td></tr><tr><td>Visible</td><td>dotted</td><td>The Container’s border is a dotted line.</td></tr><tr><td>Visible</td><td>dashed</td><td>The Container’s border is a dashed line.</td></tr><tr><td>Border: Color</td><td>color</td><td>The Container’s border is the color selected. </td></tr><tr><td>Border: Width</td><td>number in pixels</td><td>The width of the Container’s border is defined by a custom number of pixels.</td></tr><tr><td>Border: Radius</td><td>number in pixels</td><td>The radius of the Container border’s corners is defined by a custom number of pixels.</td></tr><tr><td>Shadow: Color</td><td>color</td><td>The Container’s shadow is the color selected. </td></tr><tr><td>Shadow: Opacity</td><td>number between 0 and 100</td><td>The opacity of the Container’s shadow. </td></tr><tr><td>Shadow: Radius</td><td>number in pixels</td><td>The radius of the Container shadow’s corners is defined by a custom number of pixels.</td></tr><tr><td>Shadow: Offset</td><td>number in pixels</td><td>How far the Container’s shadow should be offset, in height and width, is defined by a custom number of pixels.</td></tr></tbody></table>
{% endtab %}

{% tab title="Spacing" %}

<table><thead><tr><th width="135.66666666666666">Property</th><th width="116">Value</th><th>Description</th></tr></thead><tbody><tr><td>Margin</td><td>top</td><td>The margin between the Container’s top border and the next Container as defined by a custom number of pixels.</td></tr><tr><td>Margin</td><td>bottom</td><td>The margin between the Container’s bottom border and the next Container as defined by a custom number of pixels.</td></tr><tr><td>Margin</td><td>left</td><td>The margin between the Container’s left border and the next Container as defined by a custom number of pixels.</td></tr><tr><td>Margin</td><td>right</td><td>The margin between the Container’s right border and the next Container as defined by a custom number of pixels.</td></tr><tr><td>Padding</td><td>top</td><td>The padding between the Container and its top border as defined by a custom number of pixels.</td></tr><tr><td>Padding</td><td>bottom</td><td>The padding between the Container and its bottom border as defined by a custom number of pixels.</td></tr><tr><td>Padding</td><td>left</td><td>The padding between the Container and its left border as defined by a custom number of pixels.</td></tr><tr><td>Padding</td><td>right</td><td>The padding between the Container and its right border as defined by a custom number of pixels.</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

## Layout Blocks

To access the blocks specific to the Layout component:

1. Navigate to the **Blocks** tab.
2. In the component tree on the left, click the **Layout component**.
3. A drawer of Layout-specific blocks opens.

<table><thead><tr><th width="347">Block Image</th><th>Description</th></tr></thead><tbody><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FtaYukghF4HR0s47IMpRt%2FLayout%20scroll%20to%20end%20(frame%20470x40x2).png?alt=media&#x26;token=4e291b99-1fd4-4523-94ed-94dcacc97012" alt=""></td><td>If the Layout is scrollable, you can use this block to scroll the user to the end of the Layout. For example, a user clicks a button in a chat app, and the Layout scrolls to the end of the chat history to see the most recent messages.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FiytahYnR3o0A1oJJfbi8%2FLayout%20scroll%20to%20start%20(frame%20470x40x2).png?alt=media&#x26;token=e2f56598-2f44-46ed-a7ce-add78a2f1e77" alt=""></td><td>If the Layout is scrollable, you can use this block to scroll the user to the start of the Layout.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FuAPOgUEsyNkQAlH3JNIo%2Fset%20Layout&#x27;s%20height%20(frame%20470x40x2).png?alt=media&#x26;token=8a4b79ec-b8b6-45a4-9aa1-5c3c30295828" alt=""></td><td>Sets the Layout’s height to a custom number of pixels.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FrBohq6XGH7L49m0TOyOG%2Fget%20Layout&#x27;s%20height%20(frame%20470x40x2).png?alt=media&#x26;token=ffacc037-2b37-43c7-aba1-beab037e86a4" alt=""></td><td>Gets the Layout’s height in pixels.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FaILThsWyV6Yonf0EXcGA%2Fget%20Layout&#x27;s%20computed%20height%20(frame%20470x40x2).png?alt=media&#x26;token=e32d147b-a6fb-4f1d-9780-fe97ec995feb" alt=""></td><td>Gets the Layout’s computed height, the on-screen dimensions of the Layout, after it has been rendered on-screen. The value returned is an integer, representing the height of the Layout in pixels.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FagS0QxGILmg0HLSseZGX%2Fset%20Layout&#x27;s%20width%20(frame%20470x40x2).png?alt=media&#x26;token=7d2da92c-5a03-4dbd-8857-bbcbc6e008c7" alt=""></td><td>Sets the Layout’s width to a custom number of pixels.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FRMbHP1OxlCO3iC1KZYit%2Fget%20Layout&#x27;s%20width%20(frame%20470x40x2).png?alt=media&#x26;token=aa4e8bfe-6026-431b-ac98-d8cf2df035ae" alt=""></td><td>Gets the Layout’s width in pixels.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FLzQHjXW0CHrFdTbBkX5e%2Fget%20Layout&#x27;s%20computed%20width%20(frame%20470x40x2).png?alt=media&#x26;token=abc8d556-ccd7-42af-9926-105840a53a54" alt=""></td><td>Gets the Layout’s computed width, the on-screen dimensions of the Layout, after it has been rendered on-screen. The value returned is an integer, representing the width of the Layout in pixels.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FKrhh7Y9LRMQzcDbU0PG2%2Fset%20Layout&#x27;s%20visible%20(frame%20470x40x2).png?alt=media&#x26;token=dee83f10-27e7-46ba-a11c-92896a3baa5f" alt=""></td><td><p>When set to true, sets the Layout to visible, meaning the Layout is visible to users.</p><p>When set to false, sets the Layout to invisible, meaning the Layout is not visible to users.</p></td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FiTRIZchaGRfHPc3RERA0%2Fget%20Layout&#x27;s%20visible%20(frame%20470x40x2).png?alt=media&#x26;token=ca36acdf-9e55-4ecf-8001-148913f646e3" alt=""></td><td>Gets the Layout’s visibility status. Returns true (visible) or false (invisible).</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FvaMNKProDq1uQ1bOh6LK%2Fset%20Layout&#x27;s%20X%20(frame%20470x40x2).png?alt=media&#x26;token=ef74a673-1ac4-4afe-8ab9-2286343337f8" alt=""></td><td>Set the position of the upper left corner of the Layout on the X-axis, where the left side of the screen is X=0.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FRqaaaek45wcPYErMHfFW%2Fget%20Layout&#x27;s%20X%20(frame%20470x40x2).png?alt=media&#x26;token=6a517d9b-e1c2-4d18-8eba-60a7764d054d" alt=""></td><td>Get the position of the upper left corner of the Layout on the X-axis, where the left side of the screen is X=0.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F6l97BQVHXDoZY8a4fnsm%2Fset%20Layout&#x27;s%20Y%20(frame%20470x40x2).png?alt=media&#x26;token=06890149-5ca9-4fab-acf6-b4b4f97674ae" alt=""></td><td>Set the position of the upper left corner of the Layout on the Y-axis, where the top of the screen is Y=0.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F1utSLh7WuWcPOmhoZhID%2Fget%20Layout&#x27;s%20Y%20(frame%20470x40x2).png?alt=media&#x26;token=6de39a27-5533-41f1-867f-b711eb7dd442" alt=""></td><td>Get the position of the upper left corner of the Layout on the Y-axis, where the top of the screen is Y=0.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FluIByMI3f6XDX1JGqnqV%2Fset%20Layout&#x27;s%20background%20color%20(frame%20470x40x2).png?alt=media&#x26;token=a3628f8b-6899-4551-8557-6db38267671b" alt=""></td><td>Set the Layout’s background color.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FBfZRKShAxn3FU3NFgjRU%2Fget%20Layout&#x27;s%20background%20color%20(frame%20470x40x2).png?alt=media&#x26;token=b8a56036-0fff-48dc-9d09-8211dae207f9" alt=""></td><td>Get the Layout’s background color.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FGP9xVKUDgQLukFpkK0cG%2Fset%20Layout&#x27;s%20background%20picture%20(frame%20470x40x2).png?alt=media&#x26;token=651f3e56-67f5-46ef-9d7f-07707ae9392b" alt=""></td><td>Set the Layout's background picture. Click the dropdown menu to select an image from your computer.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FHbZ25R1ZvwZ974xNJjWE%2Fget%20Layout&#x27;s%20background%20picture%20(frame%20470x40x2).png?alt=media&#x26;token=d7a9e29d-f957-4351-a97e-ca53f3c7d6d9" alt=""></td><td>Get the Layout's background picture.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FsAmnPDet7ItNj8eGzieS%2Fset%20Layout&#x27;s%20background%20picture%20resize%20(frame%20470x40x2).png?alt=media&#x26;token=b98c22e7-8811-4251-8f39-51453269caff" alt=""></td><td>Set the Layout’s background picture resize mode. See the Layout Properties section for definitions of the acceptable values.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FiuSRydUntNC4eyt06l0M%2Fget%20Layout&#x27;s%20background%20picture%20resize%20(frame%20470x40x2).png?alt=media&#x26;token=7ad810ba-47f2-490f-ad95-632d85dd519c" alt=""></td><td>Get the Layout’s background picture resize mode.</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FSO78PBRsRYAHbLi0ygxR%2Fset%20Layout&#x27;s%20scrollable%20(frame%20470x40x2).png?alt=media&#x26;token=2d797a38-9bff-49ba-b193-49112be74767" alt=""></td><td><p>When set to true, sets the Layout to scrollable for users.</p><p>When set to false, sets the Layout to scrollable for users.</p></td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F9TTTNWQWeLpP5nfviM2z%2Fget%20Layout&#x27;s%20scrollable%20(frame%20470x40x2).png?alt=media&#x26;token=e1d80097-1ec0-4a18-9581-18808deca078" alt=""></td><td>Gets the Layout’s scrollable status. Returns true (scrollable) or false (not scrollable).</td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fe21OjdbyVubuLCMpbFXb%2Fset%20Layout&#x27;s%20scroll%20bar%20visible%20(frame%20470x40x2).png?alt=media&#x26;token=1adf7c66-2b4a-41de-b7ef-c852e201b381" alt=""></td><td><p>When set to true, sets the Layout’s scroll bar to visible for users.</p><p>When set to false, sets the Layout’s scroll bar to invisible for users.</p></td></tr><tr><td><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FtZmKARAa4JMrJ7n5vZar%2Fget%20Layout&#x27;s%20scroll%20bar%20visible%20(frame%20470x40x2).png?alt=media&#x26;token=7a8253b3-ab86-44d4-8caf-f955b0e4e2f0" alt=""></td><td>Gets the Layout’s scroll bar visibility status. Returns true (visible) or false (invisible).</td></tr></tbody></table>

## Container Blocks

To access the blocks specific to the Container component:

1. Navigate to the **Blocks** tab.
2. In the component tree on the left, click the **Container component** that is nested under the Layout component.
3. A drawer of Container-specific blocks opens.
4. The blocks are the same as the ones above in the [Layout Blocks section](#7.-layout-blocks), but specific to the Container instead of the Layout.

## Create a Custom Data Viewer&#x20;

Thunkable provides a variety of default [Data Viewer List](https://docs.thunkable.com/~/revisions/A81b2aVlSXGVVaRtdFDr/data-viewer-list) and [Data Viewer Grid](https://docs.thunkable.com/~/revisions/A81b2aVlSXGVVaRtdFDr/data-viewer-grid) templates, but saving a customized Layout component as a Data Viewer allows you to display your data in a way that reflects your brand design and preferences.&#x20;

### To save a Layout as a Data Viewer:

1. When you're happy with the Layout you have customized, ensure it is selected in the component tree.
2. Click the **vertical ellipsis** next to the Layout's name in the properties panel.
3. Select **Save as Data Viewer Layout**.<br>

   <div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F5jLn0SI8FPxo1CpBkjE5%2FLayout%20-%20Save%20as%20Data%20Viewer%20Layout.png?alt=media&#x26;token=02633943-ad29-4a38-a16d-065b68c5cbc3" alt="" width="563"><figcaption></figcaption></figure></div>
4. Give your Data Viewer Layout a detailed **name**.
5. Select the **Layout Type** you want to create. \
   \- List for a Data Viewer List\
   \- Grid for a Data Viewer List.
6. Click **OK**.

### To use a saved Layout as a Data Viewer:

1. Click the **Create New Screen** icon at the top of the component tree in the Designer. &#x20;
2. Drag a **Data Viewer Lis**t or **Data Viewer Grid** onto your screen.
3. Reposition and resize as necessary.
4. Connect you project to a data source. See here for instructions on connecting a data source: [Data Sources](https://docs.thunkable.com/~/revisions/A81b2aVlSXGVVaRtdFDr/data-sources).
5. Click the sample template to access the Data Viewer templates available to you.<br>

   <div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FGyhD5G4VAKaafWAFucNR%2FData%20Viewer%20List%20-%20properties%20panel%20-%20design%20template.png?alt=media&#x26;token=88d91af3-a0e4-4889-b00c-490d32510535" alt="" width="290"><figcaption></figcaption></figure></div>
6. Click to select the Layout you saved as a Data Viewer from the bottom of the template library.&#x20;
7. Map your data source columns to components within your custom Data Viewer Layout. <br>

   <div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F0aZioQtkfVBbdFAmWQUo%2FData%20Viewer%20-%20properites%20panel%20-%20map%20column%20data.png?alt=media&#x26;token=06758a83-67a1-4204-80ff-7981fe940f4c" alt="" width="279"><figcaption></figcaption></figure></div>

See here for more on working with Data Viewers and Data Sources: [Data Viewers and Data Sources](https://docs.thunkable.com/~/revisions/A81b2aVlSXGVVaRtdFDr/data-viewers).

{% hint style="success" %}
**Have feedback on this doc?** Please take a moment to share your feedback here: [Thunkable Docs Feedback](https://docs.google.com/forms/d/e/1FAIpQLSfCwn5L2xyla-LSLZX0DSWFcFeJ43qp-r1tELCacuVS2zduLA/viewform?usp=sf_link). Your valuable insights will help us improve and better serve you in the future.
{% endhint %}