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

Extra space in the Dock Item

5 Answers 174 Views

Dock

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

5 Answers, 1 is accepted

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

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

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

CONTENT

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

CONTENT

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

answered on 29 Mar 2010, 12:45 PM

screenshot.png

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

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

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

CONTENT

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

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</div>

</form>

</body>

</html>

Kind regards,
Pero
the Telerik team

answered on 10 Jun 2010, 10:23 AM

rightimage.JPG

wrongimage.PNG

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>

answered on 10 Jun 2010, 03:59 PM

ie6.gif

ie8.gif

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

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

<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