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

Padding between two raddcocks in same raddoc zone

2 Answers 57 Views
Dock
This is a migrated thread and some comments may be shown as answers.
prayag ganoje
Top achievements
Rank 1
prayag ganoje asked on 07 Apr 2011, 07:11 PM
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 Answers, 1 is accepted

Sort by
0
Accepted
Bozhidar
Telerik team
answered on 11 Apr 2011, 01:07 PM
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
0
prayag ganoje
Top achievements
Rank 1
answered on 11 Apr 2011, 10:14 PM
.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.
Tags
Dock
Asked by
prayag ganoje
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
prayag ganoje
Top achievements
Rank 1
Share this question
or