[Solved] Force splitter height to height of page

[Sean]

Hi Telerik,

I am attempting to have my RadSplitter be 100% (-few pixels) of the browser windows height.

This is my relevant HTML mark-up. 

<div class="style1">
    <br />
    <br />
    CableSolve Web Dashboard
    <br />
    <br />
    <br />
</div>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Refresh All Graphs" />
<telerik:RadButton ID="RadButton3" runat="server" onclick="RadButton3_Click"
    Skin="Web20" Text="Add Tab">
</telerik:RadButton>
<br />

<telerik:RadTabStrip ID="RadTabStrip1" runat="server"
    MultiPageID="RadMultiPage1" SelectedIndex="0" Skin="Web20">
    <Tabs>
        <telerik:RadTab runat="server" Text="Home" Selected="True" >
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" Runat="server" SelectedIndex="0">
    <telerik:RadPageView ID="RadPageView1" runat="server"><telerik:RadDockLayout ID="RadDockLayout1" Runat="server"
            onloaddocklayout="RadDockLayout_LoadDockLayout"
            onsavedocklayout="RadDockLayout_SaveDockLayout"><telerik:RadSplitter ID="RadSplitter1" Runat="server" BorderSize="0"
                Height="600px" Skin="Web20" Width="100%" ><telerik:RadPane ID="RadPane1" Runat="server" CssClass="leftRoundedCorners" Scrolling="None" Width="20px"><telerik:RadSlidingZone ID="RadSlidingZone1" Runat="server" ClickToOpen="True"
                        OnClientLoaded="OnClientSlidingZoneLoaded" Width="20px"><telerik:RadSlidingPane ID="RadSlidingPane1" Runat="server" BackColor="#ECF4FD"
                            IconUrl="./Icons/document--pencil.png" MinWidth="160" Scrolling="Y" TabView="ImageOnly"
                            Title="Settings" Width="160px"><telerik:RadListBox ID="lstBxSettings" runat="server" EnableDragAndDrop="True"
                                onclientdragging="OnClientDragging" ondropped="LstBxSettings_Dropped"
                                ondropping="LstBxSettings_Dropping" Skin="Web20" Width="100%"><ButtonSettings TransferButtons="All" /><Items><telerik:RadListBoxItem Text="Horizontal Bar" /><telerik:RadListBoxItem Text="Vertical Bar" /></Items></telerik:RadListBox></telerik:RadSlidingPane><telerik:RadSlidingPane ID="RadSlidingPane2" Runat="server" BackColor="#ECF4FD"
                            IconUrl="./Icons/chart-pie-separate.png" MinWidth="160" Scrolling="Y" TabView="ImageOnly"
                            Title="Custom Widgets"><telerik:RadListBox ID="lstBxCustom" runat="server" EnableDragAndDrop="True"
                                onclientdragging="OnClientDragging" ondropped="RadListBox_Dropped" Skin="Web20"
                                Sort="Ascending" Width="100%"><ButtonSettings TransferButtons="All" /></telerik:RadListBox></telerik:RadSlidingPane><telerik:RadSlidingPane ID="RadSlidingPane3" Runat="server" BackColor="#ECF4FD"
                            IconUrl="./Icons/chart-up-color.png" MinWidth="160" Scrolling="Y" TabView="ImageOnly"
                            Title="Historical Widgets" Width="160px"><telerik:RadListBox ID="lstBxHistorical" runat="server"
                                EnableDragAndDrop="True" onclientdragging="OnClientDragging"
                                ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending" Width="100%"></telerik:RadListBox></telerik:RadSlidingPane></telerik:RadSlidingZone></telerik:RadPane><telerik:RadPane ID="RadPane2" Runat="server" BackColor="White"
                    BorderColor="White" CssClass="rightRoundedCorners" Scrolling="None" ><telerik:RadDockZone ID="RadDockZone1" Runat="server" BorderWidth="0px"
                        CssClass="rightRoundedCorners" HighlightedCssClass="zoneClass" MinHeight="100%"
                        Skin="Web20"></telerik:RadDockZone></telerik:RadPane></telerik:RadSplitter></telerik:RadDockLayout></telerik:RadPageView>
</telerik:RadMultiPage>

<div style="width: 0px; height: 0px; overflow: hidden; position: absolute; left: -10000px;">
    <asp:UpdatePanel runat="server" ID="UpdatePanel1">
    </asp:UpdatePanel>
</div>

<div style="text-align: center;">
    <telerik:RadButton ID="RadButton1" runat="server" Skin="Web20" Text="More"
        ButtonType="LinkButton" CssClass="buttons" onclick="RadButton1_Click">
        <Icon SecondaryIconUrl="./Icons/document--plus.png" />
    </telerik:RadButton>
    <telerik:RadButton ID="RadButton2" runat="server" Skin="Web20" Text="Less" ButtonType="LinkButton" CssClass="buttons" onclick="RadButton2_Click" >
        <Icon SecondaryIconUrl="./Icons/document--minus.png" />
    </telerik:RadButton>
</div>

<br />

<div class="style2">
    ©2011 Cormant, Inc.
</div>

I went ahead and tried setting RadSplitter1's height to 100%. This caused its height to be nothing, though, since it has no content inside of it that would force its height to stay larger.

I tried setting all of its parent controls (RadMultipPage/RadPageView)'s heights to 100%, as well. I saw the same results.

Do I need to do something like in this kb article except capturing the height of the window? How would I go about doing that, if so. If not, what steps do I need to take?

Regards,

Sean

[Svetlina Anati]

Hello Sean,

 Indeed, your observation about explicit height is correct and this is general CSS rule. However, in your case, if you set all the parents to 100% the resultant page will be more than 100% - the splitter will become exactly 100% and the tabstrip, buttons, footer, etc will also add pixels.

To overcome this, you should calculate the size of the viewport and substract the outside content from it and set this height to the multipage and pageview. To avoid this you could use the built-in functionality of RadSplitter and add one more splitter with HeightOffset as explained below:

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

I modified your code in a similar manner and for your convenience I attached the page - please use it as a start point for configuring your layout.

Best wishes,
Svetlina
the Telerik team

[Garry]

This whole height thing sounds like a slimey hack to me!
We buy telerik tools so that YOU sort out the underlying complexity.
I should just be able to drop a splitter onto the web form and set 100% for height and width.
I should not have to hack CSS, JS or JQuery to get your controls to work as expected.

[Svetlina Anati]

Hello Garry,

 
I understand your point and we are always doing our best to make everything work out of the box with minimum effort left for the developer. However, this is not always possible because RadControls are actually HTML, CSS and javascript and they obey all the rules which are true in general.

For the situation in mention, the splitter has to have all its parent with explicit size set and this is not specific to it, but that is how all percentages sized elements behave. For example, if you keep all your layout and settings and replace the splitter with a simple DIV element with height set to 100% you will get the very same result.

Since we cannot change this behavior for the splitter, the only thing left we could do in this case is to iterate through all the parents and set their height explicitly. However this is not a good solution due to many facts, e.g the following ones:

1) It is not a good practice to silently change the rest of the page
2) Any sizes which were set explicitly by the developer will break
3) There are scenarios in which setting 100% height for the parent is wrong, depending on the scenario. You can have splitter set to 100% but its parent can dynamically change size.
4) Iterating through all the parents in the hierarchy will cause performance slow, while simply setting a CSS to the right elements is much better.

Having in mind the above, we think that it is much better for this particular case to provide resources on how to configure the layout in this case. You can find this described in details in our online demo below:

Apart from this case with this simple CSS setting (which is after all a general rule which means that it makes sense for the developer to do so even before encountering an issue), we have handled internally all the other related functionality and you do not have to do nothing else in order to get the rich functionality of RadSplitter.

I hope that my reply is detailed enough, in case you have additional comments or some suggestions for a better solution, we will be glad to hear it. If you provide such alternative solution and we like it, we will not only implement it on our side but we will also award you with some Telerik points for your kind cooperation.

Greetings,
Svetlina Anati
the Telerik team

[Garry]

Thanks for the response Svetlina

Whilst I appreciate that I can write DIV tags, this is missing the point of using a third party control. The reason we choose to buy ASP.Net/Ajax controls from vendors is so that we DO NOT HAVE to write HTML/CSS. We are application developers, not web designers. We expect the third party controls we use to emit the necessary HTML/JS/CSS on the fly so that we do not have to worry about that.This keeps our code focused on solving the business problems, rather than fighting against browser compatibility issues.

In an ideal world, I want to 'draw' my interface using the toolbox in VS2010 onto the design (not markup) surface. I want to use smart tags and the property grid to configure it. I want to click into the code behind (C#/VB), NOT markup (HTML/CSS), and write my business logic, then I want to compile and run it and have it open up inside a browser, and work on all browsers. I do not want to have to deal with ANY markup.

Consider the analogy of winforms, or even early SunView (the notifier), or PerQ, or any other highly productive graphical development tool: The developer draws the interface, sets properties and writes code to make it come to life. The programmer did not have to write native Win32 or Unix etc.. low level API's. The toolkit controls did that for him 90% of the time. If he wanted to he could call the native API, but it was not essential. Therefore when I use your controls, I want you to do the HTML/CSS/Browser (in)compatibility thing, not me.

Sorry that perhaps this is out of context with the original post, but you did ask for additional comments.

Thanks for listening, kind regards, Garry.

[Svetlina Anati]

Hello Garry,

I see that there is some misunderstanding between us and I apologize for that. What I meant with my previous post is that RadControls are made of HTML and as such they obey some rules which are true in general for the technology itself. That is why I gave a simple DIV as an example - I did not mean that you should use DIV instead but I used it as a demonstration of HTML elements behavior in the case. We very often  make workarounds for such cases but this is not always applicable. After that I explained in details what exactly prevents us from resolving this in our source internally. At last - unfortunately there is nothing to comment about HTML, box model and browsers because we cannot change the way they behave but what I meant as a discussion was if you have some particular technical comments or suggestions about the discussed points. 

Greetings,
Svetlina Anati
the Telerik team

[Garry]

Hi Svetlina

No misunderstanding on my part.

I have communicated what I require in this thread. Please ensure that the software component designers at Telerik get a look at it as I think it is important to remember what the purpose of a third party component library should be - it is to abstract complexity and improve productivity.

Regards, Garry.

[Ron]

Hi,

I cannot agree more with Gary. 
The examples where a splitter is used with a few panes is working like a charm. No hacks perfect. Then try to add a control to one of the panes let's say a tree view and use Ajax in combination Splitter/Treeview. Then the whole screen shrinks again.
We have tried all Telerik's suggestions regarding this matter.
Ron