Extra space in the Dock Item

6 posts, 0 answers
  1. Manishkumar
    Manishkumar avatar
    240 posts
    Member since:
    Feb 2009

    Posted 19 Mar 2010 Link to this post

    Please find the attached image for the issue and let us know if there is any fix for this issue.
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 24 Mar 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Manishkumar
    Manishkumar avatar
    240 posts
    Member since:
    Feb 2009

    Posted 24 Mar 2010 Link to this post

    Hello Pero,
    Tried as per your suggestion but still it is not working.

  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 29 Mar 2010 Link to this post

    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.
  6. Manishkumar
    Manishkumar avatar
    240 posts
    Member since:
    Feb 2009

    Posted 10 Jun 2010 Link to this post

    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> 
  7. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 10 Jun 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017