# Split Pane

(part of package '[Servoy Extra Components](/reference/servoyextensions/packages/ui-component-packages/servoy-extra-components.md)')\
Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\
Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md)

A component that provides a split pane container for displaying two forms side by side or one on top of the other.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### divLocation

Sets the initial splitter div location, between 0 and 1 is a percentange, more than 1 is a value in pixels. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: -1

***

### divSize

Size of the splitter div - in pixels. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 5

***

### enabled

Flag indicating whether the split pane is enabled for user interaction. Type: [Enabled](/reference/servoy-developer/component_and_service_property_types.md#protected) Default Value: true

***

### pane1

The left or top pane object. Type: [CustomType\<servoyextra-splitpane.pane>](#pane)

***

### pane1MinSize

Minimum size (in pixels) allowed for the left or top pane. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 30

***

### pane2

The right or bottom pane object. Type: [CustomType\<servoyextra-splitpane.pane>](#pane)

***

### pane2MinSize

Minimum size (in pixels) allowed for the right or bottom pane. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 30

***

### panes

An array of pane objects. (Deprecated: use pane1 and pane2 instead.) Type: [Array\<CustomType\<servoyextra-splitpane.pane>>](#pane)

***

### readOnly

Flag indicating whether the split pane is read-only. Type: [Protected](/reference/servoy-developer/component_and_service_property_types.md#protected)

***

### resizeWeight

Specifies how extra space is distributed between the two panes. A value of 0 means the right/bottom pane gets all extra space; 1 means the left/top pane gets it. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 0

***

### responsiveHeight

Minimum height of the splitpane, set only in responsive forms. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 300

***

### splitType

Determines the split type. Typically, 0 represents horizontal splitting and 1 represents vertical splitting. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 0

***

### styleClass

CSS style classes applied to the split pane component. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)

***

### tabSeq

Tab sequence order for keyboard navigation. Type: [Tabseq](/reference/servoy-developer/component_and_service_property_types.md#tabseq)

***

### visible

Flag indicating whether the split pane is visible. Type: [Visible](/reference/servoy-developer/component_and_service_property_types.md#visible)

***

## Events

### onChangeMethodID(previousIndex,event)

Called when the split pane changes (for example, when the divider is moved).

**Parameters:**

> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} previousIndex The previous index or position of the divider.
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the change.

***

## API

### getDividerLocation()

Gets the divider location in pixels.

**Example:**

```js
var dividerSize = myElement.dividerSize
```

**Returns:** [Number](/reference/servoycore/dev-api/js-lib/number.md) The size in pixels

***

### getDividerSize()

Gets the divider size in pixels.

**Example:**

```js
var dividerSize = myElement.dividerSize
```

**Returns:** [Number](/reference/servoycore/dev-api/js-lib/number.md) The size in pixels

***

### getLeftForm()

Returns the left form of the split pane.

**Example:**

```js
var leftForm = myElement.getLeftForm();
```

**Returns:** [Formscope](/reference/servoy-developer/component_and_service_property_types.md#form) Left form of the split pane

***

### getLeftFormMinSize()

Gets left form minimum size in pixels.

**Example:**

```js
var left = myElement.leftFormMinSize
```

**Returns:** [Number](/reference/servoycore/dev-api/js-lib/number.md) The minimum size in pixels for the left form panel.

***

### getRelativeDividerLocation()

Gets the divider location in percentage when the component is visible.

**Example:**

```js
var divRelativeLocation = myElement.getRelativeDividerLocation()
```

**Returns:** [Number](/reference/servoycore/dev-api/js-lib/number.md) The location in percentage

***

### getResizeWeight()

Gets the resize weight, which specifies how to distribute extra space when the size of the split pane changes.\
A value of 0, the default, indicates the right/bottom component gets all the extra space (the left/top component acts fixed),\
where as a value of 1 specifies the left/top component gets all the extra space (the right/bottom component acts fixed).\
Specifically, the left/top component gets (weight \* diff) extra space and the right/bottom component gets (1 - weight) \* diff extra space

**Example:**

```js
var resizeWeight = myElement.resizeWeight
```

**Returns:** [Number](/reference/servoycore/dev-api/js-lib/number.md) The resize weight value, indicating how the extra space is distributed between the left/top and right/bottom components of the split pane.

***

### getRightForm()

Returns the right form of the split pane.

**Example:**

```js
var rightForm = myElement.getRightForm();
```

**Returns:** [Formscope](/reference/servoy-developer/component_and_service_property_types.md#form) Right form of the split pane

***

### getRightFormMinSize()

Gets right form minimum size in pixels.

**Example:**

```js
var right = myElement.rightFormMinSize
```

**Returns:** [Number](/reference/servoycore/dev-api/js-lib/number.md) The minimum size in pixels for the right form panel.

***

### setDividerLocation(location)

Sets divider location. If location is less then 1 then the location will be considered at (location \* 100) percent of the split pane from left, otherwise it will represent the pixels from left.

**Example:**

```js
myElement.dividerLocation = 0.75;
myElement.dividerLocation = 100;
```

**Parameters:**

> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} location The location of the divider.

***

### setDividerSize(size)

Sets divider size in pixels.

**Example:**

```js
myElement.dividerSize = 10;
```

**Parameters:**

> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} size The size of the divider in pixels.

***

### setLeftForm(form,relation)

Set a relationless or related form as left panel.

**Example:**

```js
myElement.setLeftForm(forms.orders);
```

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} form The specified form or form name you wish to add as left panel
> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} \[relation] The relation object used to link the left panel form to the main datasource, or null for a relationless form.

**Returns:** [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Value indicating if pane was successfully added

***

### setLeftFormMinSize(minSize)

Sets left form minimum size in pixels.

**Example:**

```js
myElement.leftFormMinSize = 100;
```

**Parameters:**

> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} minSize The minimum size in pixels for the left form panel.

***

### setResizeWeight(resizeWeight)

Sets the resize weight, which specifies how to distribute extra space when the size of the split pane changes.\
A value of 0, the default, indicates the right/bottom component gets all the extra space (the left/top component acts fixed),\
where as a value of 1 specifies the left/top component gets all the extra space (the right/bottom component acts fixed).\
Specifically, the left/top component gets (weight \* diff) extra space and the right/bottom component gets (1 - weight) \* diff extra space

**Example:**

```js
myElement.resizeWeight = 10;
```

**Parameters:**

> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} resizeWeight The weight value (between 0 and 1) specifying how to distribute extra space between the left/top and right/bottom components of the split pane.

***

### setRightForm(form,relation)

Set a relationless or related form as right panel.

**Example:**

```js
myElement.setRightForm(forms.orders);
```

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} form The specified form or form name you wish to add as right panel
> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} \[relation] The relation object used to link the right panel form to the main datasource, or null for a relationless form.

**Returns:** [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Value indicating if pane was successfully added

***

### setRightFormMinSize(minSize)

Sets right form minimum size in pixels.

**Example:**

```js
myElement.rightFormMinSize = 100;
```

**Parameters:**

> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} minSize The minimum size in pixels for the right form panel.

***

## Types

## pane

Represents a pane within the split pane. scripting type: CustomType\<servoyextra-splitpane.pane>

* containsFormId
  * The form contained in this pane.
  * **Type**: [form](/reference/servoy-developer/component_and_service_property_types.md#form)
* relationName
  * The relation name used to link the pane's form to the main datasource.
  * **Type**: [relation](/reference/servoy-developer/component_and_service_property_types.md#relation)

***


---

# 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.servoy.com/reference/servoyextensions/ui-components/form-containers/split-pane.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.