---
title: "Vision - Container"
description: "All components are always inside of a container, except for the special Root Container of each window."
---

# Vision - Container

> All components are always inside of a container, except for the special Root Container of each window.

![](container.png)

**Component Palette Icon**:  

![](container1.png)

## Description
A Container can contain other components, including other containers. Uses for containers include:

* **Organization** - Containers can be used to group components together. These components can then be moved, copied, or deleted as a group. Furthermore, they will all be organized inside of their parent container in the project navigation tree, which makes them easier to find.
* **Re-usability** - Containers provide the opportunity to create a complex component that is made up of multiple other components. For instance, if you wanted to make your own custom HOA control, you can put three buttons inside of a container and configure them to all use a 'status' property that you add to their parent Container. Now you have built an HOA control that can be re-used and treated like its own component. Create a date range control that generates a SQL WHERE clause that can be used to control Charts and Tables. Create a label/button control that can be used to display datapoints, and pop up a parameterized window that displays meta-data (engineering units, physical location, notes, etc.) about that datapoint. Creating re-usable controls with Containers containing multiple components is the key to rapid application development.
* **Layout** - Containers are a great way to improve window aesthetics through borders and layout options.

:::info
To move a container around on a window, you need to hold the alt key while clicking and dragging.
:::

## Properties
| Name 	| Description 	| Property Type 	| Scripting 	| Category 	|
|---	|---	|---	|---	|---	|
| Background Color 	| The background color of the component. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx). 	| Color 	| .background 	| Appearance 	|
| Border 	| The border surrounding this component. Options are No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), and Field Border.**Note**: The border is unaffected by rotation. As of 8.1.21, the "Button Border" and "Other Border" options are removed. 	| Border 	| .border 	| Common 	|
| Combine Repaints 	| Set this to true for containers with many sub-components that need to redraw frequently (flashing, rotating, animating). 	| boolean 	| .combineRepaints 	| Behavior 	|
| Cursor 	| The mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize. 	| int 	| .cursorCode 	| Common 	|
| Font 	| Font of text on this component. 	| Font 	| .font 	| Appearance 	|
| Mouseover Text 	| The text that is displayed in the tooltip which pops up on mouseover of this component. 	| String 	| .toolTipText 	| Common 	|
| Name 	| The name of this component. 	| String 	| .name 	| Common 	|
| Opaque 	| If false, backgrounds are not drawn. If true, backgrounds are drawn. 	| boolean 	| .opaque 	| Common 	|
| Quality 	| The data quality code for any Tag bindings on this component. 	| QualityCode 	| .quality 	| Data 	|
| Styles 	| Contains the component's styles. 	| Dataset 	| .styles 	| Appearance 	|
| Texture 	| Background texture image for this container. 	| String 	| .texturePath 	| Appearance 	|
| Tile Optimized 	| If true, this container's children should never overlap, and you'll get better painting performance. 	| boolean 	| .optimizedDrawingEnabled 	| Behavior 	|
| Visible 	| If disabled, the component will be hidden. 	| boolean 	| .visible 	| Common 	|

## Scripting

### Component Functions
This component does not have component functions associated with it.

### Extension Functions
This component does not have extension functions associated with it.

### Event Handlers
Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the [Component Events](ignition-modules/vision/scripting-in-vision/component-events/component-events.md) page.

## Customizers
* [Vision Component Customizers](ignition-modules/vision/working-with-vision-components/vision-component-customizer/vision-component-customizer.md)
* [Style Customizer](ignition-modules/vision/working-with-vision-components/vision-component-customizer/vision-component-customizer.md#style-customizer)

## Examples
#### Customized Container with Border
![](container-example.png)

|Property Name| Value|
|--|--|
|Border |Bevel (Double)|
|Background Color |255,232,204 |