# Container

## Introduction

**`Container`** widget in Supervisely is a flexible tool that allows for organizing other widgets within it. It can be used to group related widgets, change the layout of widgets, and adjust the sizing of widgets. `Container` widget supports both horizontal and vertical layout options.

However, `Container` widget does not have any specific functionality on its own but serves as a wrapper for other widgets.

## Function signature

```python
container = Container(
    widgets=[],
    direction="vertical",
    gap=10,
    fractions=None,
    widget_id=None
)
```

## Parameters

|  Parameters |                 Type                |                  Description                 |
| :---------: | :---------------------------------: | :------------------------------------------: |
|  `widgets`  |            `List[Widget]`           |                List of widgets               |
| `direction` | `Literal["vertical", "horizontal"]` | Container direction (vertical or horizontal) |
|    `gap`    |                `int`                |       Gap between widgets in container       |
| `fractions` |             `List[int]`             |       Fractions for container splitting      |
| `widget_id` |                `str`                |                   Widget ID                  |

### widgets

List of widgets

**type:** `List[Widget]`

**default** `[]`

```python
container = Container(widgets=[Input(), Input(), Input()])
```

<figure><img src="https://user-images.githubusercontent.com/79905215/220125712-c4c98ba6-9cbb-4a6f-944b-335056d59536.png" alt=""><figcaption></figcaption></figure>

### direction

Container direction (vertical or horizontal)

**type:** `Literal["vertical", "horizontal"]`

**default** `"vertical"`

```python
container = Container(
    widgets=[Input(), Input(), Input()],
    direction="horizontal",
)
```

<figure><img src="https://user-images.githubusercontent.com/79905215/220126696-8fe7d789-05e1-4dff-8f9d-274c872a0d3b.png" alt=""><figcaption></figcaption></figure>

### gap

Gap between widgets in container

**type:** `int`

**default** `10`

```python
container = Container(
    widgets=[Input(), Input(), Input()],
    gap=25,
)
```

<figure><img src="https://user-images.githubusercontent.com/79905215/220127050-fa283570-2fce-4f92-9599-9c21e83fdcaf.png" alt=""><figcaption></figcaption></figure>

### fractions

Fractions for container splitting. `direction` parameter have to be `horizontal`

**type:** `List[int]`

**default** `None`

```python
container = Container(
    widgets=[Input(), Input(), Input()],
    direction="horizontal",
    fractions=[3, 2, 5],
)
```

<figure><img src="https://user-images.githubusercontent.com/79905215/220127504-4f8ceee2-83f7-40b9-976e-f865d442da86.png" alt=""><figcaption></figcaption></figure>

## Mini App Example

You can find this example in our Github repository:

[ui-widgets-demos/layouts and containers/002\_container/src/main.py](https://github.com/supervisely-ecosystem/ui-widgets-demos/blob/master/layouts%20and%20containers/002_container/src/main.py)

### Import libraries

```python
import os

import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Button, Card, Container, Input
```

### Init API client

First, we load environment variables with credentials and init API for communicating with Supervisely Instance:

```python
load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))

api = sly.Api()
```

### Prepare widgets for `Container` widget

```python
button = Button("Button")

input_1 = Input()
input_2 = Input()
input_3 = Input()
```

### Initialize `Container` widget

```python
inputs_container = Container(
    widgets=[input_1, input_2, input_3],
    direction="horizontal",
    fractions=[3, 2, 5],
    gap=20,
)
container = Container(widgets=[inputs_container, button])
```

### Create app layout

Prepare a layout for app using `Card` widget with the `content` parameter.

```python
layout = Card(title="Container card", content=container)
```

### Create app using layout

Create an app object with layout parameter.

```python
app = sly.Application(layout=card)
```

<figure><img src="https://user-images.githubusercontent.com/79905215/220128472-5e9de449-a11a-468f-9580-14eb60390db7.png" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.supervisely.com/app-development/widgets/layouts-and-containers/container.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.