Telerik Example Not Consistent under IE7 and FF35

4 posts, 0 answers
  1. Doug
    Doug avatar
    22 posts
    Member since:
    Feb 2005

    Posted 20 Oct 2009 Link to this post

    If you view the following Telerik example using IE7 and FF3.5, the top set of RadDock objects look correct (only a vertical scroll bar and RadDock title bar fully visible) under FF but incorrect (vertical and horizontal scroll bar and RadDock title bar obscured by scroll bar) under IE.

    http://demos.telerik.com/aspnet-ajax/dock/examples/zoneorientation/defaultcs.aspx

    Is there a fix for this?
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 22 Oct 2009 Link to this post

    Hi Doug,

    This is not a problem with our example and certainly not a problem with the RadDock control, but a default behavior of the IE7 browser. The RadDockZone and the RadDock controls are loaded on the page as <div> elements. If the <div> has overflow-y: auto as is the case with the RadDockZone, when the vertical scroll-bar is shown it takes up from the width of the <div> and if the elements (<div>s in our case) have width:100% (when FitDocks="true" [this is by default] of the zone the docks placed within have width:100%) the horizontal scroll-bar will be shown. You can disable the horizontal scroll-bar by overflow-x: hidden.

    You can set overflow-x: hidden to the RadDockZone using the following CSS class:

    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .RadDockZone
            {
                overflow-x: hidden !important;
            }
        </style>
    </head>
     

    For your convenience I have created a sample project to show that if you have a similar layout as the one's with zones and docks, but this time only composed of <div> elements, the horizontal scroll-bar will be shown. Here is the source code:

    <%@ 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 id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .RadDockZone
            {
                overflow-x: hidden !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="Office2007">
            <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="300px">
                <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        CONTENT
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-Title">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        CONTENT
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-Title">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        CONTENT
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
        <div style="position: relative; border: solid  Red; width: 300px; height: 300px;
            overflow-y: auto; float: left; margin-right: 10px; padding: 4px;">
            <div style="width: 100%; height: 200px; border: solid 1px Black; position: relative;
                text-align: right;">
                Div123456789
            </div>
            <div style="width: 100%; height: 200px; border: solid 1px Green; position: relative;
                text-align: right;">
                Div 23456789
            </div>
        </div>
        <div style="position: relative; border: solid Red; width: 300px; height: 300px; overflow-y: auto;
            overflow-x: hidden; float: left; padding: 4px;">
            <div style="width: 100%; height: 200px; border: solid 1px Black; position: relative;
                text-align: right;">
                Div123456789
            </div>
            <div style="width: 100%; height: 200px; border: solid 1px Green; position: relative;
                text-align: right;">
                Div 23456789
            </div>
        </div>
        </form>
    </body>
    </html>



    Regards,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tyler
    Tyler avatar
    6 posts
    Member since:
    Oct 2009

    Posted 19 Nov 2009 Link to this post

    Pero

    Thank you for this information.  Unfortunately, this does not solve my problem.  Your solution does make the horizontal scroll bar go away which is great, but the vertical scroll bar is still covering up the RadDock itself, where as in IE8 the RadDock automatically gets resized to fit completely within the RadDockZone.  Please see the attached images from your example below

    Notice that in the IE7 image, you cannot see the "89" characters in the highlighted RadDockZones, but in the IE8 image, you can see them.  Aesthetically, this looks bad, but from a functionality standpoint, if the "89" were a close/minimize button, now someone cannot close/minimize a RadDock.

    Do you have any advice on how to make IE7 act/look just like IE8?

    Thanks
    Tyler
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 24 Nov 2009 Link to this post

    Hi Tyler,

    There is not much we can do to change this IE7 behavior. The scroll-bars will always cover part of the RadDocks placed within the RadDockZone. One solution to this problem is to set padding-right to the RadDockZone and this padding to be set only under IE7 (* + html marker). Here is a modified project that has padding-right: 20px and the vertical scroll-bar is always shown.

    <%@ 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 id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            /*The following styles will be only applied under IE7.
            */* + html .RadDockZone
            {
                overflow-x: hidden !important;
                padding-right: 20px !important;
                overflow-y: scroll !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="Office2007">
            <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="300px">
                <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        CONTENT
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-Title">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        CONTENT
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-Title">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        CONTENT
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
        <div style="position: relative; border: solid  Red; width: 300px; height: 300px;
            overflow-y: auto; float: left; margin-right: 10px; padding: 4px;">
            <div style="width: 100%; height: 200px; border: solid 1px Black; position: relative;
                text-align: right;">
                Div123456789
            </div>
            <div style="width: 100%; height: 200px; border: solid 1px Green; position: relative;
                text-align: right;">
                Div 23456789
            </div>
        </div>
        <div style="position: relative; border: solid Red; width: 300px; height: 300px; overflow-y: auto;
            overflow-x: hidden; float: left; padding: 4px;">
            <div style="width: 100%; height: 200px; border: solid 1px Black; position: relative;
                text-align: right;">
                Div123456789
            </div>
            <div style="width: 100%; height: 200px; border: solid 1px Green; position: relative;
                text-align: right;">
                Div 23456789
            </div>
        </div>
        </form>
    </body>
    </html>


    All the best,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top