How to set minimum height of the Dock control

4 posts, 0 answers
  1. Snehal
    Snehal avatar
    21 posts
    Member since:
    Mar 2009

    Posted 02 Dec 2009 Link to this post

    Hi Team,

    I am using 2009 version of Telerik dll. We have minimum height provision for the
    RadDockZone , and we can set it by MinHeight property.

    In my application, I want whenever I am resizing any Dock control its height should be set to minimum "100px".

    For Example:
    In I am expanding any Dock control, then I am removing its height property so that it will be exanded to the contents height. This works fine when content is large.
    But Conside the case where dock contains only 1 line. In the case height is set the auto i.e. very less pixel.
    I tried access height in DockInit event its is giving null as we are removing height while expanding.

    Do we have any provision of setting height to some minimum valye?

     

  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 03 Dec 2009 Link to this post

    Hi Snehal,

    Please note that the following solution is specific for Q3 2009.3 1103 version of the RadControls for ASP.NET AJAX.

    You can set min-height of 134px and min-height of 100px to the dock's content container (the difference should be exactly 34px in order for the dock to behave as expected i.e. if you want to set 100px min-height to the RadDock than the min-height to the content container should be 66px) using the following CSS code:

    <style type="text/css">
        .RadDock
        {
            min-height: 134px;
        }
        .rdContent
        {
            min-height: 100px;
        }
    </style>

    Please note that the styles will be applied to all RadDocks present on the page. Additionally I am pasting the source code of the project that I tested:

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .RadDock
            {
                min-height: 134px;
            }
            .rdContent
            {
                min-height: 100px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title"
                        Resizable="true">
                        <ContentTemplate>
                            CONTENT
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>
     

    Sincerely yours,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Snehal
    Snehal avatar
    21 posts
    Member since:
    Mar 2009

    Posted 04 Dec 2009 Link to this post

    Thanks Pero for your reply.
    But this solution doesn't solve my problem.

    Assembly version which I am using is 2009.1.527.20.

    Also, I think ths feature should add in the next version of Telerik for ajax controls.

    Can you suggest me another way to resolve problem of radDock's minimum height in specified version ?

    Regards,
    Snehal
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 07 Dec 2009 Link to this post

    Hi Snehal,

    In that case the same behavior can be achieved using CSS and JavaScript. Again the height difference between the dock's content and dock's height is 34px. Here is the source code of the project that I tested:

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .rdContent
            {
                min-height: 100px;
            }
            .RadDock
            {
                min-height: 134px !important;
            }
        </style>
     
        <script type="text/javascript">
            function OnClientResizeEnd(dock, args)
            {
                if (dock.get_height() < 134)
                {
                    dock.set_height(134);
                }
            }
        </script>
     
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title"
                        Resizable="true" OnClientResizeEnd="OnClientResizeEnd">
                        <ContentTemplate>
                            CONTENT
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>

    In case the problem still persists, please send a simple running project where the issue can be reproduced and we will provide a working solution.

    Greetings,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top