Not able to get full window

[L]

hi

I am not able to get the full window for this code and also how do i expand panelbar when load? Thanks

<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"   LiveResize="true" VisibleDuringInit="false" 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"  LiveResize="true"
                          CollapseMode="Forward" Height="100%" />
        <telerik:RadPane ID="contentPane" runat="server"  Scrolling="Y">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </telerik:RadPane>
    </telerik:RadSplitter>

            </td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
        </tr>
    </table>
  </div>
    </form>

[Svetlina Anati]

Hi L,

 I already answered your other thread and for your convenience and for others who might encounter teh same problem I pasted it below:

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 HeightOffset 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.


Kind regards,
Svetlina
the Telerik team

[L]

hi

I used your suggested solution http://demos.telerik.com/aspnet-ajax/splitter/examples/resizewithwindow/defaultcs.aspx

and i am facing the diffculty of designing all page when the content template is so small at the master page. How do i scale it 100%?

this is my code:

<head runat="server">
    <title></title>
      <style type="text/css"> 
    html, body, form 
    { 
        height: 100%; 
        margin: 0px; 
        padding: 0px; 
        overflow: hidden; 
        width: 100%;
    } 
    </style> 

</head>
<body>
    <form id="form1" runat="server">
     <div id="ParentDivElement"  style="height: 100%;width:100%"> 
            <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" 
                Orientation="Horizontal" Skin="Outlook"> 
                <telerik:RadPane ID="TopPane" Width="100%" runat="server" Height="100" MinHeight="85" MaxHeight="150" 
                    Scrolling="none"> 
                    <!-- Place the content of the pane here --> 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" /> 
                <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500"
                    Width="100%"> 
                    <telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="Outlook"
                    LiveResize="true" Width="100%"> 
                        <telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="400"> 
                            <!-- Place the content of the pane here --> 
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" /> 
                        <telerik:RadPane ID="ContentPane" Width="100%" runat="server"> 
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                            </asp:ContentPlaceHolder>
                        </telerik:RadPane> 
                    </telerik:RadSplitter> 
                </telerik:RadPane> 
            </telerik:RadSplitter>        
    </div>
    </form>
</body>
</html>

I have attached a screenshot for your reference.

[Gosha]

I have also problem to set height 100% on Splitter control when using master page.
On master page I have RadMenu control:

...
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
      html, body, form
        {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
            -ms-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            overflow: hidden;
        }
        .Fill
        {
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
            -ms-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="Fill">
        ...ScriptManager...
        ...RadMenu Control...
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

on child form I have Splitter control 

<div id="ParentDivElement" class="Fill" style="border: thin solid #FF0000">
    <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
        Orientation="Horizontal" Skin="Outlook">
        <telerik:RadPane ID="TopPane" runat="server" Height="100" MinHeight="85" MaxHeight="150"
            Scrolling="none">
            <!-- Place the content of the pane here -->
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />
        <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">
            <telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="Outlook" LiveResize="true">
                <telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="400">
                    <!-- Place the content of the pane here -->
                </telerik:RadPane>
                <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" />
                <telerik:RadPane ID="ContentPane" runat="server">
                    <!-- Place the content of the pane here -->
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
    </telerik:RadSplitter>
</div>

but, bottom border of splliter is out of screen and it can't be seen because overflow is set to hidden. When is not hidden, there is vertical scrool bar and border is about RadMenu.height bellow screen.

Intersting is than I can see all borders (especially bottom) of Div element and it is on screen but Splitter exceeds it on bottom?! Is this bug? How splitter can exceed size of containing parent div?

[Svetlina Anati]

Hello Sasa,

Thank you for the provided code, I examined it and I was able to see the problem you report. When you set 100% height for the splitter it actually becomes 100% of the page. However, the menu is outside the splitter and it has some additional height and it pushes the splitter down with this height and the resultant height exceeds 100% of teh page. As a result, as you have noted, the splitter is cut off with the exactly same height as the menu has due to the hidden overflow.

To get the desired result, you should set the splitter's HeightOffset property to the height of the menu, e.g as shown below:

<div id="ParentDivElement" class="Fill" style="border: thin solid #FF0000">
       <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
           Orientation="Horizontal" Skin="Outlook" HeightOffset="26">

A more detailed KB article about this property is available below:

http://www.telerik.com/support/kb/aspnet-ajax/splitter/making-radsplitter-occupy-part-of-a-page-with-variable-size.aspx

For your convenience I attached your modified pages and I hope that my reply is helpful, let me know how it goes.

All the best,
Svetlina
the Telerik team

[Gosha]

Thank you for the support. You helped me. Where is "mark as answer" button?


you might add in http://demos.telerik.com/aspnet-ajax/splitter/examples/resizewithwindow/defaultcs.aspx
"if you use menu or similar control with splitter, you can add HeightOffset="xx" to correct height of splitter for height of menu..."