Padding between two raddcocks in same raddoc zone

3 posts, 1 answers
  1. prayag ganoje
    prayag ganoje avatar
    127 posts
    Member since:
    Feb 2010

    Posted 07 Apr 2011 Link to this post

    Hello,

    I have a raddockzone with min-height=500. When I add two docks in the this raddockzone then i wish to keep 15px distance between the docks added one after another. Is there any property by which I can manage it ?

    Thanks,
    Prayag
  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 11 Apr 2011 Link to this post

    Hi,

    You could use the Style property in order to specify margin around the different RadDocks. In that case I have used:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!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">
             
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Vertical" MinHeight="500">
                <telerik:RadDock runat="server" ID="rdPhoneNotes" Width="230px" EnableAnimation="true"
                    DefaultCommands="All" Skin="Default" Title="Custom Command" Style="margin: 0 0 10px 0;">
                    <ContentTemplate>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis luctus quam.
                        Mauris consectetur enim et metus varius quis aliquam sapien consectetur. Nulla eget
                        diam lacus, in tempus lacus. Praesent vitae volutpat leo. Curabitur ac neque eros.
                        Aliquam vel dolor arcu, quis viverra mi. Fusce velit libero, tincidunt eget gravida
                        eget, gravida id neque. Sed elementum aliquam enim ac sagittis. Sed eu nulla sit
                        amet felis consequat dapibus. Duis et nulla eget nisi aliquam venenatis in in erat.
                        Mauris sit amet nulla augue, sit amet pulvinar arcu.
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock runat="server" ID="RadDock3" Width="230px" EnableAnimation="true"
                    DefaultCommands="All" Skin="Default" Title="Custom Command" Style="margin: 0 0 10px 0;">
                    <ContentTemplate>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis luctus quam.
                        Mauris consectetur enim et metus varius quis aliquam sapien consectetur. Nulla eget
                        diam lacus, in tempus lacus. Praesent vitae volutpat leo. Curabitur ac neque eros.
                        Aliquam vel dolor arcu, quis viverra mi. Fusce velit libero, tincidunt eget gravida
                        eget, gravida id neque. Sed elementum aliquam enim ac sagittis. Sed eu nulla sit
                        amet felis consequat dapibus. Duis et nulla eget nisi aliquam venenatis in in erat.
                        Mauris sit amet nulla augue, sit amet pulvinar arcu.
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock runat="server" ID="RadDock1" Width="230px" EnableAnimation="true"
                    DefaultCommands="All" Skin="Default" Title="Custom Command" Style="margin: 0 0 10px 0;">
                    <ContentTemplate>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis luctus quam.
                        Mauris consectetur enim et metus varius quis aliquam sapien consectetur. Nulla eget
                        diam lacus, in tempus lacus. Praesent vitae volutpat leo. Curabitur ac neque eros.
                        Aliquam vel dolor arcu, quis viverra mi. Fusce velit libero, tincidunt eget gravida
                        eget, gravida id neque. Sed elementum aliquam enim ac sagittis. Sed eu nulla sit
                        amet felis consequat dapibus. Duis et nulla eget nisi aliquam venenatis in in erat.
                        Mauris sit amet nulla augue, sit amet pulvinar arcu.
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </div>
        </form>
    </body>
    </html>

    Where the four values in the margin are as follows: top, right, bottom, left. So if you want for example to have 10px to the bottom and 10px to the right, you should use the following: Style="margin: 0 10px 10px 0;".

    Best wishes,
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. prayag ganoje
    prayag ganoje avatar
    127 posts
    Member since:
    Feb 2010

    Posted 11 Apr 2011 Link to this post

    .RadDock
       {
           height: auto!important;
           margin: 0 0 15px 0 !important;
       }

    This change worked for me for the static as well as the dynamically creted raDocks.
Back to Top