## 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.