Based on my understanding of the initial question, the below script should work
<script type="text/javascript">
$(document).ready(function () {
$('.t-group').css({ overflow: "auto", height: ($(window).height() - 150) });
});
</script>
Note: 150 will have to replaced by any number that will suite your purpose. In my case the Page Header was 150px in height. Mathematically, panel bar height = The height of the window - Page Header height.
you might also want to make sure that this height is retained after you collapse and expand. If it doesn't then you can try the following:
Assuming your mark up looks like this:
<input type="hidden" id="panelAdjuster" value="0" onchange="test();"/>
@{ Html.Telerik().PanelBar()
.Name("RandomPanelBar")
.HtmlAttributes(new { style = "width: 235px; float: left; margin-bottom: 0px; vertical-align:top;"})
.ClientEvents( events => events
.OnExpand("Sizer") ) ...
then the below script should fix it
<script type="text/javascript">
$(document).ready(function () {
$('.t-group').css({ overflow: "auto", height: ($(window).height() - 150) });
Sizer = function () {
$('#panelAdjuster').trigger('onchange');
}
test = function () {
var id = setTimeout(function () {
$('.t-group').height(($(window).height() - 150))
.css({ overflow: "auto" });
},
1000);
}
});
</script>