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!