Auto Fit Container Styling
All containers in Titan enable you to insert multiple elements into one holder. When this container is moved all the elements inside of it move along a unit, keeping their position in the container.
The Auto Fit’s main purpose is to display dynamic data. It expands to fit larger content and contracts when the content is smaller or hidden, without leaving any unwanted spaces. The Auto Fit can be made to look interactive using three states: Default, Hover and Clicked. Styling the states differently will create a desired effect.
This element can be broken down into two parts, which can be styled individually, for example, the Root fill color and size or the Overlay border. This element can be edited on both the Element Style Level and the Project Style Level.
The Three Auto Fit Container States
| # | Option | Function | Available in Project or Element 
|
|---|---|---|---|
| 1 | Default | The Default option refers to the basic state of a Link element. This state is when it is not hovered or clicked on, but simply visible. | 
|
| 2 | Hover | This option refers to the state of the Link once the user hovers over it with the mouse. |
|
| 3 | Clicked | This refers to the state of the Link when the user clicks it. |
|
| # | Option | Function | Available in Project or Element
|
|---|---|---|---|
| 1 | Root | This option enables you to set general properties that affect the Auto Fit Container as a whole. |
|
| 2 | Overlay | The Overlay option allows you to create a filter or effect above the Auto Fit container by setting a partially transparent color, image or border on top of it. |
|
1. Root
The Root option enables you to set general properties that affect the Auto Fit Container as a whole, such as fill, spacing, position, size, padding, and so much more.
You can also give end users an indication of when they are hovering or clicking on the Auto Fit Container. For this reason, Titan provides three states for the Root styling options: Default, Hover, and Clicked. You can set different fill or border values in each state, for example, to create the desired effect.
| # | Option | Function | Available in Project or Element
|
|---|---|---|---|
| 1 | Fill | The Fill option allows you to set the background color of the Auto Fit Container. The color can be set by selecting from a color pallet or by providing a HEX color code. An image may also be uploaded as a background. Set your selected fill of choice (color or image) to also have opacity. |
|
| 2 | Spacing | The Spacing property enables you to set the vertical spacing in pixels between the Auto Fit rows or the horizontal space when the autofit is used horizontally. |
|
| 3 | Position | You can use this option to change the Auto Fit Container’s location in the content area, on the x and y-axis (left/right/top/bottom). Position also allows you to make the Auto Fit Container float over its parent container or over the entire page. “Float over Parent” allows you to set the location of the Auto Fit Container within the box containing it, e.g. strip. “Float over Page” allows you to set the location of the Auto Fit Container inside of the entire page (and have it stay in the same location even when the user is scrolling in it). |
|
| 4 | Size | This option allows you to change the width and height of the Auto Fit Container. |
|
| 5 | Padding | This option allows you to set a space inside of the Auto Fit container border so that the content does not reach the edges. The padding could be set for the Top, Bottom, Left and Right sides. |
|
| 6 | Alignment | You can set the Auto Fit Container to a vertical or horizontal position in relation to its strip (left/center/right/top/middle/bottom). The Alignment option also allows you to set the position of a few elements in relation to each other. |
|
| 7 | Border | The Border option allows you to style the contour of the Auto Fit Container: make the border visible or invisible, change its width, color, corner radius, and more. The border can be styled as a whole or separated into top, bottom, left, and right border lines. |
|
| 8 | Shadow | You can add single or multiple shadow layers to the inner and outer contours of the Auto Fit Container with the Shadow option. |
|
| 9 | User CSS | Cascading Style Sheets (CSS) allow a user to apply styles on the Auto Fit Container with CSS code. Note: For Project styling, CSS is accessed via the Tools menu, which you can read about in our Style Elements Using User CSS article. |
|
2. Overlay
The Overlay option allows you to create a filter or effect above the Auto Fit container by setting a partially transparent color, image or border on top of it.
| # | Option | Function | Available in Project or Element
|
|---|---|---|---|
| 1 | Fill | The Fill option allows you to set a color for an overlay in the Auto Fit Container. The color can be set by selecting from a color pallet or by providing a HEX color code. An image may also be uploaded as a background. Set your selected fill of choice (color or image) to also have opacity. |
|
| 2 | Border | The Border option allows you to style the contour of the overlay: make the border visible or invisible, change its width, color, corner radius, and more. The border can be styled as a whole or separated into top, bottom, left, and right border lines. |
|
