# SplitContainer

You can add controls to the two resizable panels, and you can add other `SplitContainer` controls to existing `SplitContainer` panels to create many resizable display areas.

Use the `SplitContainer` control to divide the display area of a container (such as a Form) and allow the user to resize controls that are added to the `SplitContainer` panels. When the user passes the mouse pointer over the splitter, the cursor changes to indicate that the controls inside the `SplitContainer` control can be resized.

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}

## Features

### Orientation

The splitter can be arranged horizontally or vertically by setting the `Orientation` property.

![SplitContainer with Horizontal Splitter](/files/-Mj5uj8TuEcVncHZFSPT)

![SplitContainer with Vertical Splitter](/files/-Mj5v4exzstMg_HEZ9tZ)

### Collapsible Panels

Each `SplitterPanel` in the `SplitContainer` can collapse programmatically or by using the collapse button in the panel's header.

![Collapsible Panel Example](/files/9yg0fEdbSDlGjrwLU3gn)

For each panel use the `ShowHeader` and `ShowCloseButton` properties to manage the header part of the `SplitterPanel`. When the user collapses the panel, it collapses to its side.

![Collapsed Panel Example](/files/2MVpZUM61sqGiofMra67)

{% hint style="info" %}
Only one panel can be collapsed at a time.
{% endhint %}

### Nested SplitContainers

A `SplitContainer` can contain other `SplitContainer` controls and "merge" the internal splitter bar to make it look and behave as one control. It's all about the borders of the inner `SplitterPanel`.

![Nested SplitContainer Example](/files/RRdg6fm4N9RKBz9bbyzk)

Wisej.NET detects whether the docked child control has borders, if it does it removes the border from the inner `SplitterPanel`.

{% hint style="success" %}
Merging the borders works for any control with the `BorderStyle` property.
{% endhint %}

### Icons and Tools

Panels can also show a custom icon and any number of tools. See [Embedded Tools](/docs/controls/general/embedded-tools.md) for more details on this awesome feature.

![Icons and Tools Example](/files/Gz5PIVtxxLA5JjokHFQe)

## Advanced

### JavaScript Widget

| Item             | Description                                                                                                                            |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| Class name       | "wisej.web.SplitContainer"                                                                                                             |
| Theme appearance | "splitpane", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                                               |
| Child components | "panel1" and "panel2" are the two panels. "splitter" is the splitter bar. See [JavaScript](/docs/concepts/javascript-object-model.md). |
| Source code      | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)                    |


---

# 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://docs.wisej.com/docs/controls/containers/splitcontainer.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.