RadDock content width changes after collapse/expand

5 posts, 1 answers
  1. Michael
    Michael avatar
    6 posts
    Member since:
    May 2009

    Posted 11 May 2010 Link to this post

    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.

  2. Michael
    Michael avatar
    6 posts
    Member since:
    May 2009

    Posted 12 May 2010 Link to this post

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

    Mike
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    6 posts
    Member since:
    May 2009

    Posted 12 May 2010 Link to this post

    Just verified the behavior is the same in version 2010.1.415.35 of Telerik.Web.UI.dll.


    Mike
  5. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 13 May 2010 Link to this post

    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">
    <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.
  6. Michael
    Michael avatar
    6 posts
    Member since:
    May 2009

    Posted 13 May 2010 Link to this post

    Thanks.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017