Problem with height of Dock

2 posts, 0 answers
  1. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 13 Jun 2013 Link to this post

    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>
     
    <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
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 18 Jun 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top