Not able to get full window

2 posts, 0 answers
  1. L
    L avatar
    295 posts
    Member since:
    Apr 2008

    Posted 07 Aug 2010 Link to this post

    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>
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 11 Aug 2010 Link to this post

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