This is a migrated thread and some comments may be shown as answers.

[Solved] RadPanelItem ItemTemplate 100% child height in a RadPane scrollbar issue

3 Answers 99 Views

PanelBar

This is a migrated thread and some comments may be shown as answers.

Manoj Desai asked on 03 Sep 2010, 12:17 AM

Hi,

I have a panelbar in a radpane which is supposed to fill 100% of the browser height.

I'm then using the panelitem template to place another radpane inside of it. There are two issues:

In the first panelitem I've managed to make the radpane correctly fill 100% of the panelitem template height (using ChildGroupCssClass="splitterItem"), however, there is a scrollbar which I can't get rid of. I've tried things like overflow: hidden !important, but that doesn't seem to work. This scrollbar ends up obfuscating other scrollbars that appear in the itemtemplate radpane (such as one made by a radgrid).
In the second panelitem, there is no css so the scrollbar works correctly, however, it doesn't correctly fill 100% of the panelitem template height.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

html

{

margin: 0px;

padding: 0px;

height: 100%;

overflow: hidden;

}

body

{

margin: 0px;

padding: 0px;

height: 100%;

overflow: hidden;

}

form

{

margin: 0px;

padding: 0px;

height: 100%;

}

.splitterItem .rpItem, .splitterItem .rpTemplate

{

height: 100%;

}

</style>

</head>

<body scroll="no">

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" Height="100%">

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="100%" />

<div style="height: 100%">

<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" BorderSize="0" Orientation="Vertical" LiveResize="False" ResizeWithBrowserWindow="true" ResizeWithParentPane="true" VisibleDuringInit="true">

<telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" Width="250px" Height="100%" MinWidth="0" BackColor="Red">

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="FullExpandedItem" Height="100%">

<Items>

<telerik:RadPanelItem ID="RadPanelItem1" runat="server" Text="RadPanelItem1" ChildGroupCssClass="splitterItem" Selected="true" Expanded="true">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

<telerik:RadSplitter ID="RadSplitter3" runat="server" ResizeWithParentPane="false" Height="100%">

<telerik:RadPane ID="RadPane3" runat="server" Scrolling="None" Height="100%">

don't want that scrollbar

</telerik:RadPane>

</telerik:RadSplitter>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem ID="RadPanelItem2" runat="server" Text="RadPanelItem2">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

<telerik:RadSplitter ID="RadSplitter4" runat="server" ResizeWithParentPane="false" Height="100%">

<telerik:RadPane ID="RadPane4" runat="server" Scrolling="None" Height="100%">

without the css, doesn't fully fill the pane

</telerik:RadPane>

</telerik:RadSplitter>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</telerik:RadAjaxPanel>

</form>

</body>

</html>

In 2010.1.519.35, this wasn't an issue, but in further versions (I'm using 2010.2 826 in this example).

Any help is appreciated!

3 Answers, 1 is accepted

answered on 08 Sep 2010, 11:12 AM

panelbarinsplitter3.zip

Hello Manoj,

I've attached my test page based on your code to demonstrate how to fix these issues. Please download it and give it a try.

All the best,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 08 Sep 2010, 07:43 PM

Hi Yana,

Unfortunately, the internal radpanes don't seem to fill the entire panel vertically:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

<style type="text/css">

html

{

margin: 0px;

padding: 0px;

height: 100%;

overflow: hidden;

}

body

{

margin: 0px;

padding: 0px;

height: 100%;

overflow: hidden;

}

form

{

margin: 0px;

padding: 0px;

height: 100%;

}

.splitterItem .rpItem, .splitterItem .rpTemplate

{

height: 100%;

}

</style>

</head>

<body scroll="no">

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" Height="100%">

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="100%" />

<div style="height: 100%">

<telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" Width="250px" Height="100%" MinWidth="0" BackColor="Red">

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="FullExpandedItem" Height="100%" OnClientLoad="panelBarLoad">

<Items>

<telerik:RadPanelItem ID="RadPanelItem1" runat="server" Text="RadPanelItem1" Selected="true" Expanded="true">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

<telerik:RadSplitter ID="RadSplitter3" runat="server" ResizeWithParentPane="true" Height="100%">

<telerik:RadPane ID="RadPane3" runat="server" Scrolling="None" Height="100%">

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum metus sed quam fringilla pulvinar. Morbi tincidunt, sapien laoreet dictum ultrices, est magna molestie lorem, ac condimentum lorem ipsum sit amet leo. Proin vitae tellus id ligula congue bibendum. Mauris dolor dolor, interdum sed facilisis a, ultricies varius mauris. Ut vitae tellus ipsum, in malesuada dolor. In gravida tempor magna et suscipit. Ut faucibus lobortis erat id tempor. Vivamus quam dui, hendrerit non hendrerit nec, feugiat lacinia est. Morbi venenatis nibh quis leo auctor fermentum cursus purus adipiscing. Pellentesque sed convallis orci. Integer sed urna leo. In egestas adipiscing metus, facilisis laoreet eros suscipit vel. Nulla elementum adipiscing orci id tempus. Maecenas pretium lobortis est, vitae convallis urna consequat et. Etiam porta sagittis ornare. Sed et ante diam. Maecenas adipiscing accumsan erat, a pellentesque ipsum mollis et. Pellentesque consequat leo nec lacus lacinia vulputate.</

p>

<p>

Aenean fringilla ipsum massa, vitae pulvinar quam. Phasellus rhoncus, sapien nec molestie hendrerit, turpis neque porta ipsum, a vestibulum enim quam id ante. Sed auctor quam in mauris semper ac bibendum lorem iaculis. Pellentesque ullamcorper congue lorem non ultrices. Suspendisse potenti. Sed non sem sed eros egestas fermentum vitae ut augue. Vestibulum nec lacinia ligula. Nulla eu turpis mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sed odio felis. Nulla ultrices varius leo sed vehicula. Ut porttitor velit eget libero gravida eget egestas lectus iaculis. Nunc a dapibus massa.</

p>

<p>

Fusce at porttitor augue. Proin nulla purus, convallis a bibendum sit amet, venenatis id lacus. Curabitur non eleifend massa. Sed vitae sem nec enim auctor auctor. Proin turpis urna, molestie gravida posuere nec, posuere non neque. Donec vehicula aliquet nulla, eget viverra massa commodo a. Aliquam erat volutpat. Curabitur in mattis mi. Curabitur lobortis ornare sem vel posuere. Ut et ipsum ut odio tempus ultrices vitae quis sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ac turpis risus. Morbi condimentum sem eu tortor pellentesque congue. Maecenas blandit sem sit amet nisi fringilla bibendum. Nulla magna nisi, vestibulum nec luctus sed, ullamcorper a neque. Nunc blandit lacus neque, sed posuere velit. Pellentesque felis dolor, commodo at lobortis id, egestas non libero. Donec eu eros id orci laoreet pulvinar. Donec sit amet mi nibh.</

p>

<p>

Sed in tincidunt erat. In ullamcorper adipiscing aliquet. Nullam blandit cursus imperdiet. Pellentesque fermentum placerat ultricies. Quisque at quam orci, a vehicula nunc. Aliquam cursus tortor a orci vestibulum egestas. Proin a velit non felis dignissim aliquam. Praesent malesuada convallis sem eu volutpat. Sed vel est et lorem convallis fringilla at vel tellus. Sed suscipit massa quis ipsum sollicitudin volutpat. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec rhoncus elementum lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et lectus nec dui consectetur rhoncus ac ut nunc.</

p>

<p>

Praesent ac eros at sapien dapibus sodales eu interdum justo. Nulla enim ante, congue in consectetur eget, pellentesque in ipsum. Praesent pretium accumsan dolor ac commodo. Aliquam vehicula sem ligula. Vivamus felis sapien, iaculis bibendum tristique vulputate, molestie sed tortor. Nam quis turpis id velit bibendum luctus id ac risus. Vivamus dictum vehicula euismod. Donec volutpat ultrices dolor, cursus convallis ipsum iaculis in. Mauris convallis, leo ultrices interdum interdum, velit velit vestibulum ante, ac sagittis felis tortor quis ligula. Nam pulvinar luctus eros, in volutpat risus ultrices vel. Integer commodo tristique neque, eget facilisis metus semper id. Duis commodo, sem id porttitor dictum, mi orci lobortis enim, et posuere diam velit quis mauris. In hac habitasse platea dictumst. Aenean posuere pulvinar ante. Phasellus mattis, sapien quis feugiat luctus, metus magna ultrices felis, vel luctus metus lorem at metus.

</p>

</telerik:RadPane>

</telerik:RadSplitter>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem ID="RadPanelItem2" runat="server" Text="RadPanelItem2">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

<telerik:RadSplitter ID="RadSplitter4" runat="server" ResizeWithParentPane="true" Height="100%">

<telerik:RadPane ID="RadPane4" runat="server" Scrolling="None" Height="100%">

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum metus sed quam fringilla pulvinar. Morbi tincidunt, sapien laoreet dictum ultrices, est magna molestie lorem, ac condimentum lorem ipsum sit amet leo. Proin vitae tellus id ligula congue bibendum. Mauris dolor dolor, interdum sed facilisis a, ultricies varius mauris. Ut vitae tellus ipsum, in malesuada dolor. In gravida tempor magna et suscipit. Ut faucibus lobortis erat id tempor. Vivamus quam dui, hendrerit non hendrerit nec, feugiat lacinia est. Morbi venenatis nibh quis leo auctor fermentum cursus purus adipiscing. Pellentesque sed convallis orci. Integer sed urna leo. In egestas adipiscing metus, facilisis laoreet eros suscipit vel. Nulla elementum adipiscing orci id tempus. Maecenas pretium lobortis est, vitae convallis urna consequat et. Etiam porta sagittis ornare. Sed et ante diam. Maecenas adipiscing accumsan erat, a pellentesque ipsum mollis et. Pellentesque consequat leo nec lacus lacinia vulputate.</

p>

<p>

Aenean fringilla ipsum massa, vitae pulvinar quam. Phasellus rhoncus, sapien nec molestie hendrerit, turpis neque porta ipsum, a vestibulum enim quam id ante. Sed auctor quam in mauris semper ac bibendum lorem iaculis. Pellentesque ullamcorper congue lorem non ultrices. Suspendisse potenti. Sed non sem sed eros egestas fermentum vitae ut augue. Vestibulum nec lacinia ligula. Nulla eu turpis mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sed odio felis. Nulla ultrices varius leo sed vehicula. Ut porttitor velit eget libero gravida eget egestas lectus iaculis. Nunc a dapibus massa.</

p>

<p>

Fusce at porttitor augue. Proin nulla purus, convallis a bibendum sit amet, venenatis id lacus. Curabitur non eleifend massa. Sed vitae sem nec enim auctor auctor. Proin turpis urna, molestie gravida posuere nec, posuere non neque. Donec vehicula aliquet nulla, eget viverra massa commodo a. Aliquam erat volutpat. Curabitur in mattis mi. Curabitur lobortis ornare sem vel posuere. Ut et ipsum ut odio tempus ultrices vitae quis sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ac turpis risus. Morbi condimentum sem eu tortor pellentesque congue. Maecenas blandit sem sit amet nisi fringilla bibendum. Nulla magna nisi, vestibulum nec luctus sed, ullamcorper a neque. Nunc blandit lacus neque, sed posuere velit. Pellentesque felis dolor, commodo at lobortis id, egestas non libero. Donec eu eros id orci laoreet pulvinar. Donec sit amet mi nibh.</

p>

<p>

Sed in tincidunt erat. In ullamcorper adipiscing aliquet. Nullam blandit cursus imperdiet. Pellentesque fermentum placerat ultricies. Quisque at quam orci, a vehicula nunc. Aliquam cursus tortor a orci vestibulum egestas. Proin a velit non felis dignissim aliquam. Praesent malesuada convallis sem eu volutpat. Sed vel est et lorem convallis fringilla at vel tellus. Sed suscipit massa quis ipsum sollicitudin volutpat. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec rhoncus elementum lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et lectus nec dui consectetur rhoncus ac ut nunc.</

p>

<p>

Praesent ac eros at sapien dapibus sodales eu interdum justo. Nulla enim ante, congue in consectetur eget, pellentesque in ipsum. Praesent pretium accumsan dolor ac commodo. Aliquam vehicula sem ligula. Vivamus felis sapien, iaculis bibendum tristique vulputate, molestie sed tortor. Nam quis turpis id velit bibendum luctus id ac risus. Vivamus dictum vehicula euismod. Donec volutpat ultrices dolor, cursus convallis ipsum iaculis in. Mauris convallis, leo ultrices interdum interdum, velit velit vestibulum ante, ac sagittis felis tortor quis ligula. Nam pulvinar luctus eros, in volutpat risus ultrices vel. Integer commodo tristique neque, eget facilisis metus semper id. Duis commodo, sem id porttitor dictum, mi orci lobortis enim, et posuere diam velit quis mauris. In hac habitasse platea dictumst. Aenean posuere pulvinar ante. Phasellus mattis, sapien quis feugiat luctus, metus magna ultrices felis, vel luctus metus lorem at metus.

</p>

</telerik:RadPane>

</telerik:RadSplitter>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</telerik:RadAjaxPanel>

</form>

<script type="text/javascript">

function panelBarLoad(sender, args) {

setTimeout(function () { sender.repaint(); }, 1);

}

</script>

</body>

</html>

answered on 09 Sep 2010, 01:39 PM

Hi Manoj,

I suggest you use ContentTemplate instead ItemTemplate in order to access the splitters directly and change your code like this:

<telerik:RadPanelItem ID="RadPanelItem1" runat="server"

Text="RadPanelItem1" Selected="true" Expanded="true">

<ContentTemplate>

<telerik:RadSplitter ID="RadSplitter3" runat="server" ResizeWithParentPane="false" Height="100%">

<telerik:RadPane ID="RadPane3" runat="server" Scrolling="None" Height="100%">

...

</ContentTemplate>

and the javascript:

<script type="text/javascript">

function panelBarLoad(sender, args) {

setTimeout(function() { sender.repaint(); }, 1);

setTimeout(function() { $find("<%=RadSplitter3.ClientID %>").repaint(); }, 10);

}

</script>

All the best,
Yana
the Telerik team