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

Extra space in the Dock Item

5 Answers 63 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Manishkumar
Top achievements
Rank 1
Manishkumar asked on 19 Mar 2010, 08:26 AM
Please find the attached image for the issue and let us know if there is any fix for this issue.

5 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 24 Mar 2010, 11:18 AM
Hello Manishkumar,

You shouldn't set the Height property and set the MinHeight only. Here is a demo, showing how the DockZones behave when the MinHeight is set to 200px:

<%@ 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">
        .RadDockZone
        {
            float: left;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        </Scripts>
    </asp:ScriptManager>
    <div>
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="100px" Width="300px">
                <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"
                    Height="200px">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        CONTENT
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
            <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="200px" Width="300px">
                <telerik:RadDock ID="RadDock2" runat="server" Title="RadDock-Title" Width="300px"
                    Height="300px">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        CONTENT
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
    </div>
    </form>
</body>
</html>



Kind regards,
Pero
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Manishkumar
Top achievements
Rank 1
answered on 24 Mar 2010, 12:21 PM
Hello Pero,
Tried as per your suggestion but still it is not working.

0
Pero
Telerik team
answered on 29 Mar 2010, 12:45 PM
Hi Manishkumar,

Could please open a support ticket, and send us a sample project that demonstrates the issue? I set even smaller value for the MinHeight property of the zone, and the zone extends its height to contain the docks placed within. Here is the modified code:

<%@ 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">
        .RadDockZone
        {
            float: left;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        </Scripts>
    </asp:ScriptManager>
    <div>
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="20px" Width="300px">
                <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"
                    Height="200px">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        CONTENT
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
            <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="30px" Width="300px">
                <telerik:RadDock ID="RadDock2" runat="server" Title="RadDock-Title" Width="300px"
                    Height="300px">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        CONTENT
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
    </div>
    </form>
</body>
</html>


Kind regards,
Pero
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Manishkumar
Top achievements
Rank 1
answered on 10 Jun 2010, 10:23 AM
Hi,
Sorry for late reply,
I have gone through the solution which you have provided(I have used MinHeight) but still i am facing the same issue in the IE8 browser in IE6 browser it is working fine. I am sending you 2 snapshot, first one is "WrongImage.png" from IE8 browser and second one is "RightImage.jpg" from IE6 browser. I want same look in IE8 browser as I am getting from IE6 browser.
Below is the code which I am using in the aspx page, dynamically I am adding text in the raddockzone but all setting i am doing using aspx only. and also find snapshots of "WrongImage.png"  and "RightImage.jpg" the attahced.
  <><telerik:RadDockLayout StoreLayoutInViewState="true" OnLoadDockLayout="RadDockLayoutBrowser_LoadDockLayout"
OnSaveDockLayout="RadDockLayoutBrowser_SaveDockLayout" Skin="Vista" EnableEmbeddedSkins="true"
runat="server" ID="RadDockLayoutBrowser">
<div id="divTop" runat="server" style="width: 100%; height: auto; border: none; border-left: none;">
<table cellspacing="0" cellpadding="5px" border="0" width="100%" >
<tr>
<td id="td1" runat="server" valign="top" width="33%%">
<telerik:RadDockZone Skin="Vista" runat="server" ID="RadDockZone1" Orientation="vertical"
Style="border: 0px;" EnableAjaxSkinRendering="true" >
</telerik:RadDockZone>
</td>
<td id="td2" runat="server" valign="top" width="33%">
<telerik:RadDockZone Style="border: 0px;" runat="server" ID="RadDockZone2"
Orientation="vertical">
</telerik:RadDockZone>
</td>
<td id="td3" runat="server" valign="top" width="33%">
<telerik:RadDockZone Style="border: 0px;" runat="server" ID="RadDockZone3"
Orientation="vertical">
</telerik:RadDockZone>
</td>
</tr>
</table>
</div>
</telerik:RadDockLayout> 
0
Bozhidar
Telerik team
answered on 10 Jun 2010, 03:59 PM
Hi Manishkumar,

We have tried to reproduce your problem, but with no success.
Please, find attached IE6.gif and IE8.gif showing the results in these browsers. For reproducing the problem we have used the following code, but we do not succeeded to have any unwanted space:

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <telerik:RadDockLayout StoreLayoutInViewState="true" Skin="Vista" EnableEmbeddedSkins="true"
        runat="server" ID="RadDockLayoutBrowser">
        <div id="divTop" runat="server" style="width: 100%; height: auto; border: none; border-left: none;
            background-color: Blue;">
            <table cellspacing="0" cellpadding="5px" border="0" width="100%">
                <tr>
                    <td id="td1" runat="server" valign="top" width="33%%">
                        <telerik:RadDockZone Skin="Vista" runat="server" ID="RadDockZone1" Orientation="vertical"
                            Style="border: 0px;" EnableAjaxSkinRendering="true" MinHeight="10">
                            <telerik:RadDock ID="DOck1" runat="server" Title="Title" Width="300px">
                                <ContentTemplate>
                                    <table>
                                        <tr>
                                            <td>
                                                <a href="#">Some Link</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a href="#">Some Link</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a href="#">Some Link</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a href="#">Some Link</a>
                                            </td>
                                        </tr>
                                    </table>
                                </ContentTemplate>
                            </telerik:RadDock>
                            <telerik:RadDock ID="RadDock1" runat="server" Title="Title" Width="300px">
                                <ContentTemplate>
                                    <table>
                                        <tr>
                                            <td>
                                                <a href="#">Some Link</a>
                                            </td>
                                        </tr>
                                    </table>
                                </ContentTemplate>
                            </telerik:RadDock>
                            <telerik:RadDock ID="RadDock2" runat="server" Title="Title" Width="300px">
                                <ContentTemplate>
                                    <table>
                                        <tr>
                                            <td>
                                                <a href="#">Some Link</a>
                                            </td>
                                        </tr>
                                    </table>
                                </ContentTemplate>
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </td>
                    <td id="td2" runat="server" valign="top" width="33%">
                        <telerik:RadDockZone Style="border: 0px;" runat="server" ID="RadDockZone2" Orientation="vertical">
                            <telerik:RadDock ID="RadDock3" runat="server" Title="Title" Width="300px">
                                <ContentTemplate>
                                    <table>
                                        <tr>
                                            <td>
                                                <a href="#">Some Link</a>
                                            </td>
                                        </tr>
                                    </table>
                                </ContentTemplate>
                            </telerik:RadDock>
                            <telerik:RadDock ID="RadDock4" runat="server" Title="Title" Width="300px">
                                <ContentTemplate>
                                    <table>
                                        <tr>
                                            <td>
                                                <a href="#">Some Link</a>
                                            </td>
                                        </tr>
                                    </table>
                                </ContentTemplate>
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </td>
                    <td id="td3" runat="server" valign="top" width="33%">
                        <telerik:RadDockZone Style="border: 0px;" runat="server" ID="RadDockZone3" Orientation="vertical">
                            <telerik:RadDock ID="RadDock5" runat="server" Title="Title" Width="300px">
                                <ContentTemplate>
                                    <table>
                                        <tr>
                                            <td>
                                                <a href="#">Some Link</a>
                                            </td>
                                        </tr>
                                    </table>
                                </ContentTemplate>
                            </telerik:RadDock>
                            <telerik:RadDock ID="RadDock6" runat="server" Title="Title" Width="300px">
                                <ContentTemplate>
                                    <table>
                                        <tr>
                                            <td>
                                                <a href="#">Some Link</a>
                                            </td>
                                        </tr>
                                    </table>
                                </ContentTemplate>
                            </telerik:RadDock>
                            <telerik:RadDock ID="RadDock7" runat="server" Title="Title" Width="300px">
                                <ContentTemplate>
                                    <table>
                                        <tr>
                                            <td>
                                                <a href="#">Some Link</a>
                                            </td>
                                        </tr>
                                    </table>
                                </ContentTemplate>
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </td>
                </tr>
            </table>
        </div>
    </telerik:RadDockLayout>
    </form>
</body>
</html>

Please, provide us a fully working project or live url, where we could investigate the problem.

Greetings,
Bojo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
Dock
Asked by
Manishkumar
Top achievements
Rank 1
Answers by
Pero
Telerik team
Manishkumar
Top achievements
Rank 1
Bozhidar
Telerik team
Share this question
or