# Common Properties

### Layout & Positioning

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FjWPoHvgnRS4CUSwVskYA%2Fimage.png?alt=media&#x26;token=10216709-d5a9-48cf-a14c-e1cdb38b0db2" alt="" width="250"><figcaption></figcaption></figure>

All **Layout & Positioning** properties can be found in the top section of **any components'** properties panel.

### XY Positions

The **XY positioning** of a component is determined by the component's top left corner of its bounding box.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FkGtnojMaTxZSS4sxzFxB%2FLayout_and_Positioning_XY.png?alt=media&#x26;token=5cddb42c-3dc8-4f5e-b854-456d9203a1d9" alt="" width="563"><figcaption></figcaption></figure>

These properties will shift the components along their respective X and Y axes. Any change to the **X Position** will move the component left and right; any changes to the **Y Position** will move the component up and down.&#x20;

If a component is dragged along the canvas, then the values in the inputs will live update to display their new position.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FTzHnjPKrRlTXL6spJcfu%2FLayout_and_Positioning_moving.gif?alt=media&#x26;token=7698f5fd-ed2e-4173-9d2c-3efd5fe61d45" alt="" width="563"><figcaption></figcaption></figure>

### Alignment

The alignment options allow components to have positions set, relative to their parent container, both **Vertically** and **Horizontally**.

#### Horizontal Alignment

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F8C3JVgI9cnNSZtssRdDk%2FLayout_and_Positioning_Horizontal_Alignment.png?alt=media&#x26;token=77969b47-8338-440e-973a-1ed7c2f680bd" alt="" width="169"><figcaption></figcaption></figure>

**Horizontal Alignment** sets layout behaviour on the horizontal axis. This can be:

* Fixed Position - uses the **X Position** property
* Left - fixes the component to the left side of the parent container
* Center - fixes the component to the centre of the parent container
* Right - fixes the component to the right side of the parent container
* Stretch - stretches the component to fill the width of the parent container.

{% hint style="info" %}
For **Horizontal Alignment** settings other than Fixed position, the X Position will be overridden. Components cannot be dragged/moved left or right along the canvas, and will only move up or down.
{% endhint %}

#### Vertical Alignment

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FYCetTHLTUSxSXs98EK8b%2FLayout_and_Positioning_Vertical_Alignment.png?alt=media&#x26;token=1bae0002-bb88-4a4e-a166-70d782b5500e" alt="" width="174"><figcaption></figcaption></figure>

**Vertical Alignment** sets layout behaviour on the vertical axis. This can be:

* Fixed position - uses the **Y Position** property
* Top - fixes the component to the top of the parent container
* Middle - fixes the component to the middle of the parent container
* Bottom - fixes the component to the bottom of the parent container
* Stretch - stretches the component to fill the height of the parent container.

{% hint style="info" %}
For **Vertical Alignment** settings other than Fixed position, the Y Position will be overridden. Components cannot be dragged/ moved up or down along the canvas, and will only move left or right.
{% endhint %}

A visual representation of the current aligment settings will appear beside the properties to indicate the alignment.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FJWmWeFxAiigSKa4bp4LA%2FLayout_and_Positioning_Alignment_diagram.png?alt=media&#x26;token=cc005855-ceaf-4ac0-9066-fecdceeb0704" alt="" width="281"><figcaption></figcaption></figure>

{% hint style="info" %}
A brief description appears at the bottom of the alignment properties, explaining the current settings for the component alignment.
{% endhint %}

#### CSS Class

The **CSS Class** property is an advanced feature that allows you to to apply CSS styles to components. It works by attaching a class to the component that you can configure custom CSS styling for.&#x20;

{% hint style="warning" %}
The native components in Squirrel365 are made up of many DOM elements so it may be necessary to use CSS selectors to target the specific property or element that you intend to style. Contact Support if you need help with this feature
{% endhint %}

### Dynamic visibility

Dynamic visibility is used to show and hide components in response to user interactions and/or data conditions.

The component will be visible when the condition evaluates to true.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FJ5AMUfUMsHR8A1uo7uIN%2FDynamicVisibility.png?alt=media&#x26;token=35c12c6d-778b-4902-b47c-4fdbab2f2f2d" alt="" width="281"><figcaption></figcaption></figure>

Use dynamic visibility to show a pop-up information screen, hide a component until it is required, switch between different visual representations of data, and many other scenarios. Learn more about [**Dynamic Visibility**](https://learn.squirrel365.io/getting-started/core-concepts/dynamic-visibility) one of the core concepts of Squirrel365.