## Properties

Name | Type | Default
--- | --- | ---
autoUpdate | Boolean | false

Automatically updates the panel, if its children size is changed.

#### Code examples

Set the `autoUpdate` property.

    $('#jqxPanel').jqxPanel({autoUpdate: true});

Get the `autoUpdate` property.

    var autoUpdate = $('#jqxPanel').jqxPanel('autoUpdate');

Try it: autoUpdate is set to true

disabled | Boolean | false

Sets or gets whether the panel is disabled.

#### Code examples

Set the `disabled` property.

    $('#jqxPanel').jqxPanel({ disabled:true });

Get the `disabled` property.

    var disabled = $('#jqxPanel').jqxPanel('disabled');

Try it: disabled is set to true

height | Number/String | null

Sets or gets the panel's height.

#### Code examples

Set the `height` property.

    $('#jqxPanel').jqxPanel({height:"400px"});

Get the `height` property.

    var height = $('#jqxPanel').jqxPanel('height');

Try it: height is set to 250

rtl | Boolean | false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

#### Code example

Set the `rtl` property.

    $('#jqxPanel').jqxPanel({rtl : true});

Get the `rtl` property.

    var rtl = $('#jqxPanel').jqxPanel('rtl');

Try it: rtl is set to true

sizeMode | String | 'fixed'

Sets or gets the sizing mode. In the 'fixed' mode, the panel displays scrollbars, if its content requires it. In the wrap mode, the scrollbars are not displayed and the panel automatically changes its size.

Possible Values:

    'fixed'

    'wrap'

#### Code examples

Set the `sizeMode` property.

    $('#jqxPanel').jqxPanel({sizeMode: "wrap"});

Get the `sizeMode` property.

    var sizeMode = $('#jqxPanel').jqxPanel('sizeMode');

Try it: sizeMode is set to 'wrap'

scrollBarSize | Number | 17

Sets or gets the scrollbar's size.

#### Code examples

Set the `scrollBarSize` property.

    $('#jqxPanel').jqxPanel({ scrollBarSize: 20 });

Get the `scrollBarSize` property.

    var scrollBarSize = $('#jqxPanel').jqxPanel('scrollBarSize');

Try it: scrollBarSize is set to 20

theme | String | ''

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

- Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

      <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
      <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />

- Set the widget's theme property to 'energyblue' when you initialize it.

Try it: theme is set to 'energyblue'

width | Number/String | null

Sets or gets the panel's width.

#### Code examples

Set the `width` property.

    $('#jqxPanel').jqxPanel({width:"200px"});

Get the `width` property.

    var width = $('#jqxPanel').jqxPanel('width');

Try it: width is set to 250

## Methods

append | Method |

Appends an element to the panel's content.

Parameter | Type | Description
--- | --- | ---
html element | Object |

Return Value
None

#### Code examples

Invoke the `append` method.

    $('#jqxPanel').jqxPanel('append', $('#elementId')[0]);

Try it: appends an element in the jqxPanel.

clearcontent | Method |

Clears the panel's content.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `clearcontent` method.

    $('#jqxPanel').jqxPanel('clearcontent');

Try it: clears the content of the jqxPanel.

destroy | Method |

Destroys the widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `destroy` method.

    $('#jqxPanel').jqxPanel('destroy');

Try it: destroy the jqxPanel.

focus | Method |

Focuses the widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `focus` method.

    $('#jqxPanel').jqxPanel('focus');

Try it: focuses the jqxPanel.

getScrollHeight | Method |

Get the scrollable height. Returns a Number.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
Number

#### Code examples

Invoke the `getScrollHeight` method.

    var height = $('#jqxPanel').jqxPanel('getScrollHeight');

Try it: gets the scroll's height in the jqxPanel.

getVScrollPosition | Method |

Get the vertical scrollbar's position. Returns a Number.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
Number

#### Code examples

Invoke the `getVScrollPosition` method.

    var position = $('#jqxPanel').jqxPanel('getVScrollPosition');

Try it: gets the scroll's position in the jqxPanel.

getScrollWidth | Method |

Get the scrollable width. Returns a Number.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
Number

#### Code examples

Invoke the `getScrollWidth` method.

    var width = $('#jqxPanel').jqxPanel('getScrollWidth');

Try it: gets the scroll's width in the jqxPanel.

getHScrollPosition | Method |

Get the horizontal scrollbar's position. Returns a Number.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
Number

#### Code examples

Invoke the `getHScrollPosition` method.

    var position = $('#jqxPanel').jqxPanel('getHScrollPosition');

Try it: gets the scroll's possition in the jqxPanel.

prepend | Method |

Prepends an element to the panel's content.

Parameter | Type | Description
--- | --- | ---
html element | Object |

Return Value
None

#### Code examples

Invoke the `prepend` method.

    $('#jqxPanel').jqxPanel('prepend', $('#elementId')[0]);

Try it: prepends an element in the jqxPanel.

remove | Method |

Remove an element from the panel's content.

Parameter | Type | Description
--- | --- | ---
html element | Object |

Return Value
None

#### Code examples

Invoke the `remove` method.

    $('#jqxPanel').jqxPanel('remove', $('#elementId')[0]);

Try it: removes an element in the jqxPanel.

scrollTo | Method |

Scroll to specific position.

Parameter | Type | Description
--- | --- | ---
top | Number |
left | Number |

Return Value
None

#### Code examples

Invoke the `scrollTo` method.

    $('#jqxPanel').jqxPanel('scrollTo', 10, 20);

Try it: scrolls to a specific position in the jqxPanel.