# Panel

A `Panel` is a control that contains other controls. You can use a `Panel` to group collections of controls such as a group of `RadioButton` controls. As with other container controls such as the `GroupBox` control, if the `Panel` control's `Enabled` property is set to `false`, the controls contained within the `Panel` will also be disabled.

The `Panel` control is displayed by default without any borders. You can provide a standard or three-dimensional border using the `BorderStyle` property to distinguish the area of the panel from other areas on the form. Because the `Panel` control derives from the `ScrollableControl` class, you can use the `AutoScroll` property to enable scroll bars in the `Panel` control. When the `AutoScroll` property is set to `true`, any controls located within the `Panel` (but outside of its visible region), can be scrolled to with the scroll bars provided.

The `Panel` control does not display a caption. If you need a control similar to a `Panel` that can display a caption, see the `GroupBox` control.

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

## Features

### Auto Size

When enabled, the `Panel` control can resize itself to fit its contents according to the `AutoSizeMode` property specified.

!\[Panel demonstrating automatic resizing based on content]\(../../.gitbook/assets/PanelAutoSize (1).gif)

### Header

Several containers in Wisej.NET come with a built-in header for displaying a title and optional collapsible icon. The header can be shown by setting the `ShowHeader` property of the container to `true`. The collapsible icon can be hidden by setting the `ShowCloseButton` property to `false`.

!\[Panel showing header with title and collapsible icon]\(../../.gitbook/assets/image (164).png)

### Collapse Direction

The `Panel` control can be collapsed to the `Top`, `Bottom`, `Left`, or `Right` using the `CollapseSide` property. The default value is `Top`. The default header position can be changed by setting the `HeaderPosition` property.

!\[Panel demonstrating different collapse directions]\(../../.gitbook/assets/Panel Collapse.gif)

{% content-ref url="../../concepts/layouts" %}
[layouts](https://docs.wisej.com/docs/concepts/layouts)
{% endcontent-ref %}

## Advanced

### JavaScript Widget

| Item                | Description                                                                                                                                                                                                                                                                             |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Class name          | "wisej.web.Panel"                                                                                                                                                                                                                                                                       |
| Theme appearance    | "panel", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                                                                                                                                                                                                    |
| Child components    | "pane" is the container. "captionbar" is the header. "title" is the title of the panel. "icon" is the icon of the panel, if applicable. "close-button" is the close button of the panel, if applicable. See [JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model). |
| Toolcontainer state | "panel", see [Embedded Tools](https://docs.wisej.com/docs/controls/general/embedded-tools).                                                                                                                                                                                             |
| Source code         | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)                                                                                                                                                                     |