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

Height 100% - won't fill available space

7 Answers 106 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Mbott
Top achievements
Rank 1
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

Sort by
0
Yana
Telerik team
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
0
Patrik Johansson
Top achievements
Rank 1
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. 
0
Patrik Johansson
Top achievements
Rank 1
answered on 26 Mar 2012, 01:04 PM
Double post due to Forum error
0
Kate
Telerik team
answered on 29 Mar 2012, 11:45 AM
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
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.
0
Patrik Johansson
Top achievements
Rank 1
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)
0
Patrik Johansson
Top achievements
Rank 1
answered on 02 Apr 2012, 10:31 PM
Just a quick additional question, will the  FullExpandedItem and Expanded = true on all panels work togheter?
0
Kate
Telerik team
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.
Tags
PanelBar
Asked by
Mbott
Top achievements
Rank 1
Answers by
Yana
Telerik team
Patrik Johansson
Top achievements
Rank 1
Kate
Telerik team
Share this question
or