Automatically aligning the height of raddock control

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 11 Jun 2021 14:25 by ADMIN

Rathna

Created on: 05 Apr 2019 10:41

Category: UI for ASP.NET AJAX

Type: Feature Request

Automatically aligning the height of raddock control

Hi,

It will be great to have a property in a raddock to automatically adjust its height/width to occupy the new space created when some other raddock in the layout is minimized. This will avoid the need for the user to adjust the height/width of the raddock which is still visible.

1 comment

ADMIN

Rumen

Posted on: 12 Apr 2019 10:34

Hi Rathna,

Thank you for your feature request!

Setting Width and Height of the RadDock in percentage values is not supported, because of one main reason - in quite a lot of scenarios the Width and Height are computed dynamically, and are set to a fixed values in pixels. The scenarios involve: expanding and collapsing the dock, resizing the dock, dragging the dock in some specific cases.

So, if you still require Height in percents, you could enforce it using custom CSS, as shown in this code:

<%@ Register Namespace="Telerik.Web.UI.Debug" TagPrefix="debug" %>

<!DOCTYPE html>

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

<head runat="server">

<title></title>

<style type="text/css">

.dock70

{

height: 70% !important;

}

.dock30

{

height: 30% !important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="RadScriptManager1" runat="server">

</asp:ScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<div>

<telerik:RadDockLayout ID="RadDockLayout1" runat="server">

<telerik:RadDockZone ID="RadDockZone1" runat="server" Height="100%" Width="300px">

<telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"

CssClass="dock70">

<ContentTemplate>

Dock's Content 70%

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="RadDock2" runat="server" Title="RadDock-Title" Width="300px"

CssClass="dock30">

<ContentTemplate>

Dock's Content 30%

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</div>

</form>

</body>

</html>

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.