Height 100% - won't fill available space

8 posts, 0 answers
  1. Mbott
    Mbott avatar
    24 posts
    Member since:
    Dec 2008

    Posted 19 Jul 2010 Link to this post

    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>
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 22 Jul 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Patrik Johansson
    Patrik Johansson avatar
    270 posts
    Member since:
    May 2010

    Posted 26 Mar 2012 Link to this post

    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. 
  5. Patrik Johansson
    Patrik Johansson avatar
    270 posts
    Member since:
    May 2010

    Posted 26 Mar 2012 Link to this post

    Double post due to Forum error
  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 29 Mar 2012 Link to this post

    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.
  7. Patrik Johansson
    Patrik Johansson avatar
    270 posts
    Member since:
    May 2010

    Posted 02 Apr 2012 Link to this post

    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)
  8. Patrik Johansson
    Patrik Johansson avatar
    270 posts
    Member since:
    May 2010

    Posted 02 Apr 2012 Link to this post

    Just a quick additional question, will the  FullExpandedItem and Expanded = true on all panels work togheter?
  9. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 03 Apr 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017