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

Problem with height of Dock

1 Answer 30 Views

Dock

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

Andreas asked on 13 Jun 2013, 12:58 PM

Hi,

I posted a major issue that happened in the Q2 Beta:
http://www.telerik.com/community/forums/aspnet-ajax/beta/problem-with-height-of-dock.aspx

You said that this would be solved in the Q2 release, but it isn't solved...
The link to my original thread doesn't work anymore so here we go again:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="dock.aspx.vb" Inherits="TestaTredjepartWeb.dock" %>

<!DOCTYPE html>

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

<head runat="server">

<title></title>

</head>

<body>

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

<div>

<asp:ScriptManager ID="s" runat="server" ScriptMode="Debug">

</asp:ScriptManager>

<telerik:RadDockZone runat="server" ID="dz" RenderMode="Lightweight">

<telerik:RadDock runat="server" ID="RadDock2" RenderMode="Lightweight">

<ContentTemplate>

<asp:Button ID="btn" runat="server" Text="Click me" OnClientClick=

"var divExpand = $get('divExpand'); if(divExpand.style.display=='none') divExpand.style.display='block'; else divExpand.style.display='none'; return false;"

/>

<div id="divExpand" style="display: none">

Expanded

</div>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</div>

</form>

</body>

</html>

Clicking on the button works just fine initially, the dock sizes with the content.
But after collapsing and expanding the dock, the dock doesn't resize anymore!!!

Is there any workaround?

Regards
Caesar

1 Answer, 1 is accepted

answered on 18 Jun 2013, 11:19 AM

Hi Caesar,

I have logged this issue in our feedback portal here, so that you can monitor, comment and vote on it. The unexpected behavior is related to the height that is set to the wrapper of the RadDock as well as to the wrapper of the content template, so that the browser cannot resize them. For the time being you can manually remove both heights on DockExpandCollapseCommand:
ASPX:

<telerik:RadDock runat="server" ID="RadDock1" RenderMode="Classic" Resizable="true">

<ContentTemplate>

<asp:Button ID="btn" runat="server" Text="Click me" OnClientClick="toggleVisibility(); return false;" />

<div id="divExpand" style="display: none; height: 400px;">

Expanded

</div>

</ContentTemplate>

<Commands>

<telerik:DockExpandCollapseCommand OnClientCommand="DockExpandCollapseCommand" />

</Commands>

</telerik:RadDock>

JavaScript:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function toggleVisibility() {

var divExpand = $get('divExpand');

if (divExpand.style.display == 'none') {

divExpand.style.display = 'block';

}

else {

divExpand.style.display = 'none';

}

function DockExpandCollapseCommand(sender, args) {

if (!sender.get_collapsed()) {

sender.get_contentContainer().style.height = "";

sender.get_element().style.height = "";

}

</script>

</telerik:RadCodeBlock>

Regards,
Danail Vasilev
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.