# 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="/pages/mursD6ihgBT546ue8poi" %}
[Layouts](/docs/concepts/layouts.md)
{% 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](/docs/concepts/javascript-object-model.md). |
| Toolcontainer state | "panel", see [Embedded Tools](/docs/controls/general/embedded-tools.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/panel.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.