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

Padding between two raddcocks in same raddoc zone

2 Answers 88 Views

Dock

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

2 Answers, 1 is accepted

Accepted

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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