Docking Resize when Client Window Resize

4 posts, 0 answers
  1. Edmund
    Edmund avatar
    4 posts
    Member since:
    Dec 2010

    Posted 24 Dec 2010 Link to this post

    I have 3 raddockzones.  For each zone, I set my width to 33% and min-width to some px.  However, when I resize my window (IE8), raddock zone did not resize properly.  Is there a way to make a 3 relative size column raddockzone with fixed position instead of using float left?

    Also, each dock title become funny looking when I change client size.  Is there something that I can do to make resize work properly (please see attached)?
  2. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 30 Dec 2010 Link to this post

    Hello WenTao,

    For the first issue, you could apply an additional CSS class to RadDockZone and instead floating left, to use display: inline-block.

    For the second issue, when you resize the browser window, the Dock are also reszied, and there is no enough space for the title width and it breaks the title zone. This could be fixed by applying some specific width for Title and set the overflow to hidden. This will prevent the breaking of the title zone, and if title is too long when it is resized part of it will be hidden.

    For your convenience I have prepared some simple sample code. In yellow are marked the necessary changes:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!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>
        <style type="text/css">
            .inlineDock
            {
                display: inline-block;
                zoom: 1; /* IE hack to trigger hasLayout */
                *display: inline; /* IE hack to achieve inline-block behavior */
            }
             
            .rdTitleBar em
            {
                width: 70% !important; /* this value could be changed depending on the resize */
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Vertical" Width="33%"
                CssClass="inlineDock">
                <telerik:RadDock runat="server" ID="rdPhoneNotes" Width="230px" EnableAnimation="true"
                    DefaultCommands="All" Skin="Default" Title="Custom Command">
                    <ContentTemplate>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis luctus quam.
                        Mauris consectetur enim et metus varius quis aliquam sapien consectetur. Nulla eget
                        diam lacus, in tempus lacus. Praesent vitae volutpat leo. Curabitur ac neque eros.
                        Aliquam vel dolor arcu, quis viverra mi. Fusce velit libero, tincidunt eget gravida
                        eget, gravida id neque. Sed elementum aliquam enim ac sagittis. Sed eu nulla sit
                        amet felis consequat dapibus. Duis et nulla eget nisi aliquam venenatis in in erat.
                        Mauris sit amet nulla augue, sit amet pulvinar arcu.
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
            <telerik:RadDockZone ID="RadDockZone2" runat="server" Orientation="Vertical" Width="33%"
                CssClass="inlineDock">
                <telerik:RadDock runat="server" ID="RadDock1" Width="230px" EnableAnimation="true"
                    DefaultCommands="All" Skin="Default" Title="Custom Command">
                    <ContentTemplate>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis luctus quam.
                        Mauris consectetur enim et metus varius quis aliquam sapien consectetur. Nulla eget
                        diam lacus, in tempus lacus. Praesent vitae volutpat leo. Curabitur ac neque eros.
                        Aliquam vel dolor arcu, quis viverra mi. Fusce velit libero, tincidunt eget gravida
                        eget, gravida id neque. Sed elementum aliquam enim ac sagittis. Sed eu nulla sit
                        amet felis consequat dapibus. Duis et nulla eget nisi aliquam venenatis in in erat.
                        Mauris sit amet nulla augue, sit amet pulvinar arcu.
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
            <telerik:RadDockZone ID="RadDockZone3" runat="server" Orientation="Vertical" Width="33%"
                CssClass="inlineDock">
                <telerik:RadDock runat="server" ID="RadDock2" Width="230px" EnableAnimation="true"
                    DefaultCommands="All" Skin="Default" Title="Custom Command">
                    <ContentTemplate>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis luctus quam.
                        Mauris consectetur enim et metus varius quis aliquam sapien consectetur. Nulla eget
                        diam lacus, in tempus lacus. Praesent vitae volutpat leo. Curabitur ac neque eros.
                        Aliquam vel dolor arcu, quis viverra mi. Fusce velit libero, tincidunt eget gravida
                        eget, gravida id neque. Sed elementum aliquam enim ac sagittis. Sed eu nulla sit
                        amet felis consequat dapibus. Duis et nulla eget nisi aliquam venenatis in in erat.
                        Mauris sit amet nulla augue, sit amet pulvinar arcu.
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </div>
        </form>
    </body>
    </html>


    Best wishes,
    Bojo
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Edmund
    Edmund avatar
    4 posts
    Member since:
    Dec 2010

    Posted 06 Jan 2011 Link to this post

    Thank you for your reply.  When I applied your solution, I still have 1 more issue.  During window resize, docks on the right tend to flow under first dock.  I tried to make overflow hidden, but it didn't work.  Is there a way to make dock panel fixed in 3 columns configuration during window resize (so they don't flow under each other)?  Here is my CSS code:

    .inlineDock

     

    {
    display: inline-block;
    zoom: 1; /* IE hack to trigger hasLayout */*display: inline;
    /* IE hack to achieve inline-block behavior */
    width: 32% !important;
    overflow: hidden !important;
    min-width: 200px !important;
    vertical-align: top !important;
    border-width: 1px !important;
    }

    Thank you!

     

  5. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 06 Jan 2011 Link to this post

    Hello WenTao,

    I am not quite sure if this will helps, but you could try and let us know if this is what you want to achieve:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!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>
        <style type="text/css">
            .RadDockZone
            {
                width: 100% !important;
            }
             
            .dockWidth
            {
                width: 32% !important;
                display: inline-block;
                margin-left: 5px;
                zoom: 1; /* IE hack to trigger hasLayout */
                *display: inline; /* IE hack to achieve inline-block behavior */
            }
             
            .inlineDock
            {
                display: inline-block;
                width: 31%;
                zoom: 1; /* IE hack to trigger hasLayout */
                *display: inline; /* IE hack to achieve inline-block behavior */
                overflow: hidden !important;
            }
             
            .rdTitleBar em
            {
                width: 70% !important; /* this value could be changed depending on the resize */
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Vertical" CssClass="inlineDock">
                <telerik:RadDock runat="server" ID="rdPhoneNotes" Width="230px" EnableAnimation="true"
                    DefaultCommands="All" Skin="Default" Title="Custom Command" CssClass="dockWidth">
                    <ContentTemplate>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis luctus quam.
                        Mauris consectetur enim et metus varius quis aliquam sapien consectetur. Nulla eget
                        diam lacus, in tempus lacus. Praesent vitae volutpat leo. Curabitur ac neque eros.
                        Aliquam vel dolor arcu, quis viverra mi. Fusce velit libero, tincidunt eget gravida
                        eget, gravida id neque. Sed elementum aliquam enim ac sagittis. Sed eu nulla sit
                        amet felis consequat dapibus. Duis et nulla eget nisi aliquam venenatis in in erat.
                        Mauris sit amet nulla augue, sit amet pulvinar arcu.
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
            <telerik:RadDockZone ID="RadDockZone2" runat="server" Orientation="Vertical" CssClass="inlineDock">
                <telerik:RadDock runat="server" ID="RadDock1" Width="230px" EnableAnimation="true"
                    DefaultCommands="All" Skin="Default" Title="Custom Command" CssClass="dockWidth">
                    <ContentTemplate>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis luctus quam.
                        Mauris consectetur enim et metus varius quis aliquam sapien consectetur. Nulla eget
                        diam lacus, in tempus lacus. Praesent vitae volutpat leo. Curabitur ac neque eros.
                        Aliquam vel dolor arcu, quis viverra mi. Fusce velit libero, tincidunt eget gravida
                        eget, gravida id neque. Sed elementum aliquam enim ac sagittis. Sed eu nulla sit
                        amet felis consequat dapibus. Duis et nulla eget nisi aliquam venenatis in in erat.
                        Mauris sit amet nulla augue, sit amet pulvinar arcu.
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
            <telerik:RadDockZone ID="RadDockZone3" runat="server" Orientation="Vertical" CssClass="inlineDock">
                <telerik:RadDock runat="server" ID="RadDock2" Width="230px" EnableAnimation="true"
                    DefaultCommands="All" Skin="Default" Title="Custom Command" CssClass="dockWidth">
                    <ContentTemplate>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis luctus quam.
                        Mauris consectetur enim et metus varius quis aliquam sapien consectetur. Nulla eget
                        diam lacus, in tempus lacus. Praesent vitae volutpat leo. Curabitur ac neque eros.
                        Aliquam vel dolor arcu, quis viverra mi. Fusce velit libero, tincidunt eget gravida
                        eget, gravida id neque. Sed elementum aliquam enim ac sagittis. Sed eu nulla sit
                        amet felis consequat dapibus. Duis et nulla eget nisi aliquam venenatis in in erat.
                        Mauris sit amet nulla augue, sit amet pulvinar arcu.
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </div>
        </form>
    </body>
    </html>

    Regards,
    Bojo
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top