Setting the panel content to a 100% height of the container

[Alex]

I am using a panel bar in a splitter and attempting to make the panel content take up the whole pane. I am able to change the panel content size successfully, however when a height change is applied to the first element, it expands it automatically. If I exclude the first panel from the height change, then there is no expansion of the panel.

The below panelContent class is the style applied to the panel content. The only thing it contains is overflow: auto. Now the below line is how I'm trying to change the height of the panels when the page loads to get a calculated height of the side pane. 
$(".panelContent").height(200);

Is there a better way to get the panel content to resize so it takes up the full height of the pane? Alternatively, is there a way to prevent the first panel from expanding when you change the height with jquery? Are there easier ways to access the height of the panel content?

Thanks for any help,
Alex

[Dimo]

Hello Alex,

The so called full-expanded-item mode of the PanelBar, is currently not supported. This is the mode that makes the widget have the same height no matter which item is expanded.

So using custom Javascript and appropriate events to resize the PanelBar are required. You may try setting explicit height styles to the following two elements to see if this will facilitate your work:

- If a template is used, you can set height to its wrapper. For example, this is the <div> with the 10px padding inside the first root item: http://demos.kendoui.com/web/panelbar/index.html

- if normal nested item groups are used, you can set height to the inner <ul> elements.

If you need further assistance, please submit a support ticket. Make sure to include some code snippets or a demo, so that we can better understand what your scenario is.

All the best,
Dimo
the Telerik team