Vertical sizing issue.

4 posts, 0 answers
  1. Aaron
    Aaron avatar
    2 posts
    Member since:
    Mar 2011

    Posted 25 Mar 2011 Link to this post

    I am trying to get two RadDocks to take up all the vertical space in a RadDockZone and can accomplish this by using percentages where one dock height is 30% and the other is 70%. This takes up all the vertical space but the content in the dock with 30% hieght dock disappears in a div that is height 0.

    It would appear that the div that takes the <ContentTemplate></ContentTemplate> area is getting a size set to it. Is there any way to keep this behavior from happening?
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 29 Mar 2011 Link to this post

    Hello Aaron,

    Setting Width and Height of the RadDock in percentage values is not supported, because of one main reason - in quite a lot of scenarios the Width and Height are computed dynamically, and are set to a fixed values in pixels. The scenarios involve: expanding and collapsing the dock, resizing the dock, dragging the dock in some specific cases.
    So, if you still require Height in percents, you could enforce it using custom CSS, as shown in this code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .dock70
            {
                height: 70% !important;
            }
            .dock30
            {
                height: 30% !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="RadScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="1000px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"
                        CssClass="dock70">
                        <ContentTemplate>
                            Dock's Content 70%
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock2" runat="server" Title="RadDock-Title" Width="300px"
                        CssClass="dock30">
                        <ContentTemplate>
                            Dock's Content 30%
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>


    All the best,
    Pero
    the Telerik team
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Aaron
    Aaron avatar
    2 posts
    Member since:
    Mar 2011

    Posted 29 Mar 2011 Link to this post

    Thanks for the reply and that did seem to fix the issue when viewing the site in a browser that isn't IE or viewing it in IE's quirks mode. It seems to be ignoring the heights even though they have !important when rendering it in IE8 or 7.
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 31 Mar 2011 Link to this post

    Hello Aaron,

    I tested under IE8 and everything is working OK. However there are problem under IE6 and IE7, and they seem to be browser related, because we are using a <table/> element in the dock which has height of 100%, and this is causing problems. The first table row ( <tr/>) and the last are with fixed height, and the middle takes up the rest of the height. This however causes problems in IE7 and IE6, and that's why we can't use percentage values for the Height property. I searched this issue on the internet and it turns out that many other people have similar problems, and have reported the bug to Microsoft. Unfortunately MS have fixed the bug in the next version of IE, and not in IE7. Here are some of the complaints:

    My suggestion is to set fixed height in pixels to the docks and the zone.

    Kind regards,
    Pero
    the Telerik team
Back to Top