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

RadDock content width changes after collapse/expand

4 Answers 145 Views

Dock

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

Michael asked on 11 May 2010, 10:43 PM

When specifying the raddock's content width to be 100%, Firefox 3.6 and IE8 appear to function as expected; however, Safari(4.0.5) and Chrome(4.1.249.1064) seem to lose some width after the raddock control is collapsed, and then expanded.

Perhaps I'm doing something wrong? Any help is greatly appreciated.

Below is a snippet of the code:

    
            <form id="form1" runat="server" method="post">  
        
                <telerik:RadScriptManager ID="scriptManager1" runat="server"></telerik:RadScriptManager> 
        
                <telerik:RadDockZone runat="server" ID="dzLeft" Orientation="Vertical" FitDocks="true">  
        
                    <telerik:RadDock runat="server" ID="raddock1" Title="RadDock1" DefaultCommands="ExpandCollapse">  
        
                        <ContentTemplate> 
        
                            <div style="background: grey; width: 100%;">&nbsp;</div> 
        
                        </ContentTemplate> 
        
                    </telerik:RadDock> 
        
                </telerik:RadDockZone> 
        
            </form>

Thanks,

Mike

edit: attached before and after images.

4 Answers, 1 is accepted

answered on 12 May 2010, 04:42 PM

after.PNG

before.PNG

I am using version 2009.3.1103.35 of Telerik.Web.UI.dll.

Mike

Accepted

answered on 13 May 2010, 11:53 AM

Hi Mike,

It seems like, this is a browser related issue. When the dock is collapsed, its content is hid using display: none. After expanding the dock, the browser (Safari or Chrome) does not correctly redraw, the previously hidden content. To avoid the problem, you can reset the width of the <div/> to 100%, when the dock is expanded or collapsed. Here is a sample source code that does that:

<%@ 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 runat="server">

<title></title>

<script type="text/javascript">

function resizeDiv(sender, args)

{

if (args.command.get_name() == "ExpandCollapse")

{

$get("a1").style.width = "100%";

window.setTimeout(function() { $get("a1").style.width = ""; }, 1);

}

</script>

</head>

<body>

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

<telerik:RadScriptManager ID="scriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadDockZone runat="server" ID="dzLeft" Orientation="Vertical" FitDocks="true"

Width="300px">

<telerik:RadDock Title="RadDock1" DefaultCommands="ExpandCollapse" runat="server"

EnableAnimation="false" Width="500px" OnClientCommand="resizeDiv">

<ContentTemplate>

<div id="a1" style="background: grey;">

some content

</div>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</form>

</body>

</html>

Our recommendation is to not set width to the <div/> at all, since it is a "block" element, and its width will be 100% by default. For example if you set border: 2px solid Red; and width:100%, scrollbars will be shown, which is not the case if the width is not set at all.

Best wishes,
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.