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

[Solved] Height 100% - won't fill available space

7 Answers 216 Views

PanelBar

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

Mbott asked on 19 Jul 2010, 06:12 PM

I'm having trouble getting a nested radpanel bar to fill the availabler window space 100%.

The panelbar is in a raddock that resides in the center pane of my radsplitter.

Here is the code...

<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" Width="100%" Height="100%" BorderStyle="None"

BorderSize="0" EnableEmbeddedSkins="false" Skin="LehighCounty" ResizeWithBrowserWindow="true">

<telerik:RadPane ID="RadPane1" runat="server" Height="90">

<div>

<qsf:Header ID="Header1" runat="server" />

</div>

</telerik:RadPane>

<telerik:RadPane ID="RadPane2Mike" runat="server" Height="100%" width="100%">

<telerik:RadDockLayout ID="RadDockLayout1" runat="server" EnableEmbeddedSkins="false" Skin="LehighCounty">

<telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Vertical" ResizeMode="Proportional"

EnableEmbeddedSkins="false" Skin="LehighCounty" >

<telerik:RadPane ID="RadPane4" runat="server">

<telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" DockedPaneId="RadSlidingPane1">

<telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Left" EnableDock="true" Width="200">

<telerik:RadDockZone ID="RadDockZone1" runat="server">

<telerik:RadDock ID="RadDock5" runat="server" EnableAnimation="true" Title="ALERTS"

EnableRoundedCorners="true">

<ContentTemplate>

<div>Column 1</div>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" />

<telerik:RadPane ID="RadPane5" runat="server" Height="100%">

<telerik:RadDockZone ID="RadDockZone2" runat="server">

<telerik:RadDock ID="RadDock2" runat="server" EnableAnimation="true" Title="IhSIS WORKSPACE"

EnableRoundedCorners="true">

<ContentTemplate>

<div>

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="FullExpandedItem"

Skin="Windows7" Height="100%" Width="100%">

<Items>

<telerik:RadPanelItem Text="Search" AccessKey="1" Expanded="true">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

<div>ad asasdas ds sdg sdfh f</div>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Demographics" AccessKey="2">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

<div>

<div>ad asasdas ds sdg sdfh f</div>

</div>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Clerical Note" AccessKey="3">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

<div>ad asasdas ds sdg sdfh f</div>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<CollapseAnimation Duration="100" Type="InOutBounce" />

<ExpandAnimation Duration="100" Type="InOutBounce" />

</telerik:RadPanelBar>

</div>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar2" runat="server" />

<telerik:RadPane ID="RadPane6" runat="server">

<div style="overflow:hidden !important">

<telerik:RadSlidingZone ID="RadSlidingZone2" runat="server" SlideDirection="Left" DockedPaneId="RadSlidingPane2" >

<telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Title="Right" EnableDock="true" Width="250">

<telerik:RadDockZone ID="RadDockZone3" runat="server">

<telerik:RadDock ID="RadDock4" runat="server" EnableAnimation="true" Title="TODAY's OUTLOOK"

EnableRoundedCorners="true" DockMode="Docked">

<ContentTemplate>

<div>Column 3</div>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</div>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadDockLayout>

</telerik:RadPane>

<telerik:RadPane ID="RadPane3" runat="server" Height="45">

<div>

<qsf:Footer ID="Footer1" runat="server" />

</div>

</telerik:RadPane>

</telerik:RadSplitter>

7 Answers, 1 is accepted

answered on 22 Jul 2010, 03:51 PM

Hi Mike,

I've tested the provided code and the panelbar resizes to the needed height - the height of the dock which is not set to fill the entire space. Also there was an error in the markup - the panelbar <Items> tag wasn't closed. Is this exactly your code? Please explain in more details the requirements?

Regards,
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 26 Mar 2012, 01:03 PM

Picking up on this, I've noticed that when using RadPanelBar with Height set to 100% and FullExpandItem, the RadPanelBar will not fill the height completely upon page load (there is perhaps 5-10% missing at the bottom). However, once you click any of the other panels, the whole RadPanelBar will resize to fill the height completely, and it will remain correct until the next time you reload the page.

answered on 02 Apr 2012, 10:27 PM

We are using the latest version of Telerik.

We've noticed yet another problem with the height of the RadPanelBar, which is displayed in this video:

http://screencast.com/t/poZFRlNEw

Not only are the RadPanelBars not expanding to 100% height, they are not even expanding enough to show the contents of each RadPanel. We tried this in both latest Firefox and Chrome. If you "mess around with the page" in the browser (like doing Ctrl-Shif-I in chrome) it seems like it will eventually get it's height correct. Please note that this is 100% on the client side, ie no changes in actual implementation. Other times the same page, again with no code changes, will render correctly the first time.

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

ExpandMode="FullExpandedItem" Height="100%" Width="100%">

<Items>

<telerik:RadPanelItem runat="server" Expanded="True" Text="Panel1">

<ContentTemplate>

<br />

<asp:Label ID="Label378" runat="server" Font-Bold="True" Font-Size="X-Large"

Text="Text1"></asp:Label>

<br />

<i>Text5</i>

</ContentTemplate>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Expanded="True"

Text="Panel2">

<ContentTemplate>

Text2.

<br />

</ContentTemplate>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Expanded="True"

Text="Panel3">

<ContentTemplate>

Text3

<br />

</ContentTemplate>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Expanded="True"

Text="Panel4">

<ContentTemplate>

Text4

</ContentTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

(Please note that I've changed some text about, but not the HTML markup itself)

answered on 03 Apr 2012, 01:15 PM

Hi Patrik,

Please take a look at the following help article where all of the ExpandModes of the RadPanleBar are described in details - Expanding and Collapsing Items. Considering your first issue I would suggest that you use ExpandMode="SingleExpandedItem" of the RadPanelBar control that will expand the PanelItems according to their content. I tested your code with the above mentioned mode and the 2012.1.215.35 version of the Telerik controls and it works as expected from my side.

Greetings,
Kate
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.