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

[Solved] Not able to get full window

1 Answer 97 Views

Splitter

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

L asked on 07 Aug 2010, 05:18 PM

hi

I am not able to get the full window right and i want my panelbar to be expanded when load. is there something that i missed? Thanks

<style type="text/css">

.style1

{

width: 100%;

}

html, body, form

{

height: 100%;

padding: 0px;

overflow: hidden;

}

</style>

</head>

<body style="margin:0">

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

<div id="ParentDivElement" style="height: 100%;">

<table cellpadding="0" cellspacing="0" class="style1">

<tr>

<td>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

hello</td>

</tr>

<tr>

<td>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%"

Width="100%">

<telerik:RadPane ID="navigationPane" runat="server" Height="100%" Width="150">

<telerik:RadPanelBar ID="RadPanelBar1" Runat="server"

ExpandMode="FullExpandedItem" Height="100%"

Skin="Office2007">

<Items>

<telerik:RadPanelItem runat="server" Text="Application">

<Items>

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 4">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 5">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 6">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 7">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 8">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 9">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 10">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 11">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 12">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 13">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 14">

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" />

<telerik:RadPane ID="contentPane" runat="server" Scrolling="Y">

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</telerik:RadPane>

</telerik:RadSplitter>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

1 Answer, 1 is accepted

answered on 11 Aug 2010, 04:39 PM

Hello L,

You have put your RadSplitter inside of TABLE, TR and TD elements which does not have explicit height set and this breaks the following rule:

If a web page element has its height defined in percent, its parent element must have a height style as well. The rule applies recursively.
You can read about this rule on the W3 site (http://www.w3.org/TR/CSS21/visudet.html#the-height-property):
quote:
"<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block. "
You can refer to this online article (http://demos.telerik.com/aspnet-ajax/Splitter/Examples/ResizeWithWindow/DefaultCS.aspx) for information as well.

What I can suggest is to simply remove the whole TABLE - if you need to use a header and a footer, use the HeightIOffset property as explained below:

http://www.telerik.com/support/kb/aspnet-ajax/splitter/making-radsplitter-occupy-part-of-a-page-with-variable-size.aspx

This will automatically handle the resize and screen resolution and teh only other solution is to calculate and resize manually the page by using javascript which is also teh solution in case you use a standard DIV instead of a splitter.

I hope that my suggestion helps, in case you need further assistance, let me know and I will do my bets to help.

Regards,
Svetlina
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