Height 100% - won't fill available space

[Mbott]

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>

[Yana]

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

[improwise]

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. 

[improwise]

Double post due to Forum error

[Kate]

Hello Patrik,

Can you please paste your markup code so I can test it locally and observe the issue. Thus, I could determine what is causing it and help you out. Can you also clarify the version of the Telerik controls that you are using?

Regards,
Kate
the Telerik team

[improwise]

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)

[improwise]

Just a quick additional question, will the  FullExpandedItem and Expanded = true on all panels work togheter?

[Kate]

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