This is a migrated thread and some comments may be shown as answers.

How to set minimum height of the Dock control

3 Answers 160 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Snehal
Top achievements
Rank 1
Snehal asked on 02 Dec 2009, 06:54 AM
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?

 

3 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 03 Dec 2009, 11:18 AM
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.
0
Snehal
Top achievements
Rank 1
answered on 04 Dec 2009, 06:17 AM
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
0
Pero
Telerik team
answered on 07 Dec 2009, 09:33 AM
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.
Tags
Dock
Asked by
Snehal
Top achievements
Rank 1
Answers by
Pero
Telerik team
Snehal
Top achievements
Rank 1
Share this question
or