Scrollbar problem in IE

9 posts, 0 answers
  1. sky35366
    sky35366 avatar
    10 posts
    Member since:
    Jun 2007

    Posted 03 Jun 2007 Link to this post

    I have a recurrent problem in IE (using IE7). I am using 1 raddocklayout with three vertical raddockzones as in the portal example. The only change has been the width of the columns. The I created a Raddock with a width that is 50 px less wide than the raddockzone. When I display the page in Firefox everything works fine. (almost... a horizontal scroll bar appears beneath the raddockzone when I drag a control from it to another zone but then disappears). I could live with that.

    However, in IE.. the scrollbars appearing beneath the raddockzones are permanent. The only disappear when there is no raddock in the raddockzone.

    These scrollbars completely destroy the esthetic part of the site. Is this a bug? am I doing something wrong ?

    I have also noticed that dragging raddocks in firefox is really smooth... and in IE is is sort of sluggish. but that is secondary.. my main concern is the first problem. Any solution for that ?
  2. Valeri Hristov
    Admin
    Valeri Hristov avatar
    2252 posts

    Posted 04 Jun 2007 Link to this post

    Hi sky35366,

    I've seen this before and usually it is caused by the CSS styles on the page. Could you please send me a simple page, which can be used to reproduce it and I will respond with suggestions ASAP?

    Regarding the slow drag in IE7 - you could solve this problem by setting:
    <configuration>
        <system.web>
            <compilation debug="false">
    ...

    in your web.config. This setting will make ASP.NET AJAX to load its optimized scripts and to greatly increase the performance of RadDock.

    Regards,
    Valeri Hristov (Senior Developer, MCSD)
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. sky35366
    sky35366 avatar
    10 posts
    Member since:
    Jun 2007

    Posted 04 Jun 2007 Link to this post

    Here is the markup for default2.aspx (stripped down version):

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 
    <%@ 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 id="Head1" runat="server"
        <title>Mis Vínculos</title> 
        <link href="Img/Themes/Blue/style1000.css" rel="stylesheet" type="text/css" /> 
    </head> 
     
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
            <div class="maindiv"
            <center> 
                <telerik:RadDockLayout ID="RadDockLayout1" runat="server" > 
                <table cellpadding="0" cellspacing="0" class="formattable"
                    <tr> 
                        <td colspan="3" class="header"
                             
                        </td> 
                    </tr> 
                    <tr> 
                        <td colspan="3" class="hormenu"
                       &nbsp; 
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="srchbar" align="center" colspan="3"
                            <div id="srch"
                                &nbsp;</div> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="leftcol" > 
                            <telerik:RadDockZone ID="RadDockZone2" runat="server" style="width:200px; border:0px; text-align:left" Height="300px" BorderStyle="None" BorderWidth="0px" > 
                            <telerik:raddock runat="server" id="UserInfo" title="Login" width="150px" DockMode="Docked" ForbiddenZones="RadDockZone3" DefaultCommands="ExpandCollapse" BorderStyle="None" BorderWidth="0px"
                                    <contenttemplate> 
                                        <class="innerWrp"
                                            &nbsp;test</p> 
                                        </ContentTemplate> 
                                </telerik:raddock> 
                            </telerik:RadDockZone> 
                        </td> 
                        <td class="midcol"
                            <telerik:RadDockZone ID="RadDockZone3" runat="server" Height="300px" style="width:486px; border:0px;" BorderStyle="None" BorderWidth="0px"
                                <telerik:RadDock ID="Favoritos" runat="server" Width="100px" DockMode="Docked" ForbiddenZones="RadDockZone2,RadDockZone4" DefaultCommands="ExpandCollapse" Title="Mis Favoritos" BorderStyle="None" BorderWidth="0px"
                                    <ContentTemplate> 
                                     Contenido 
                                    </ContentTemplate> 
                                </telerik:RadDock> 
                             
                            </telerik:RadDockZone> 
                        </td> 
                        <td class="rightcol"
                            <telerik:RadDockZone ID="RadDockZone4" runat="server" Height="300px" style="width:228px;border:0px;" BorderStyle="None" BorderWidth="0px"
                             
                            </telerik:RadDockZone> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td colspan="3" class="botlinks" style="height: 18px"
                        </td> 
                    </tr> 
                </table> 
                </telerik:RadDockLayout> 
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
                 
            </center> 
            </div> 
            <center> 
            <div class="footer"
                &nbsp;</div> 
            </center> 
        </form> 
    </body> 
    </html> 

    and here is the css file code:

    * { 
        padding: 0; 
        margin: 0; 
    }  
     
    body { 
        background: #fff; 
        font: .74em "Trebuchet MS" Verdana, Arial, sans-serif; 
        line-height: 1em;  
    a { 
        color: #3B6EBF; 
        text-decoration: none; 
     
    a:hover { 
        text-decoration: underline; 
     
    td{vertical-align:top;} 
     
    .maindiv 
        padding: 10px 0 10px 0; 
     
    .formattable 
    width:920px; 
     
    .header { 
        height: 100px; 
        background: #85ACF7 url('hidr.jpg'); 
     
    .header h1 { padding-left: 17px; padding-top: 22px; font-size: 22px; color: #FFF; } 
    .header h1 a { font-size: 22px; color: #FFF; text-decoration: none;} 
    .header h2 { padding-left: 17px; padding-top: 0px; font-size: 17px; color: #FFF; } 
     
    .hormenu 
        background: #F6F9FB;  
        border-bottom: 1px solid #E1E1E1;  
        padding: 0px; 
        background-repeat:repeat-y; 
        font-size:10pt; 
     
    .srchbar 
         text-align:center; 
         height:20px; 
         padding: 10px 0 0 0; 
     
    .leftcol 
    width: 202px; 
     text-align:left; 
     
    .midcol 
    width:488px; 
        text-align:left; 
     
    .rightcol 
    width:230px; 
    text-align:right; 
     
    .botlinks 
        margin: 20px auto 0px auto; 
        text-align:center; 
     
     
     
    .clear { 
        display: block; 
        clear: both; 
        width: 100%; 
        height:1px; 
        overflow:hidden; 
     
    .footer 
        text-align: center; 
        color: #666; 
     
    .raddock{text-align:left;font:11px/14px arial,verdana,sans-serif} 
    .raddock .rdTitlebar{height:auto;background-image:none !important;font-size:1.1em;line-height:2em} 
    .raddock .rdTitle{background-image:none !important;} 
    .raddock div{border-color:#eee !important} 
    .raddock .rdCommands{padding-right:5px;} 
    .raddock .rdCommands .rdClose{background:url(dockPortalClose.gif) 0 -7px transparent;} 
    .raddock .rdCommands .rdCollapse{background:url(dockPortalCollapse.gif) -7px -7px transparent;} 
    .raddock .rdCommands .rdExpand{background:url(dockPortalExpand.gif) -7px -7px transparent;} 
    .raddock .innerWrp{margin:0;padding:10px} 
     
    #UserInfo *{color:#fff} 
    #UserInfo .rdTitlebar{background-color:#4C84EF} 
    #UserInfo .rdContent{background-color:#85ACF7;font-weight:bold} 
     
    .logintable 
         
     
    .usertextbox 
        color:#000 !Important; 
        width:80px !Important; 
    .passtextbox 
        color:#000 !important; 
        width:80px !Important; 
    .loginbutton 
        background-color:Transparent; 
        border-style:solid; 
        border-width:1px; 
        border-color:#fff; 
     
    #GoogleSrch {background:#fff;} 
    #GoogleSrch {border:0px !important} 
     
    #Favoritos{background:#A6C1F7;} 
        #Favoritos .rdTitlebar{background:#719EF3;} 
        #Favoritos .rdTitle{color:#fff;} 
        #Favoritos .rdContent div div *{color:#fff;} 
        #Favoritos .rdContent img{border:2px solid #85ACF7 !important} 
        #Favoritos .rdContent a{font-size:1.2em;font-weight:bold} 

    be sure to change the path of the css file in the default2.aspx file.

    As I stated before.. the scrollbars appear all the time in IE while in Firefox they appear only when moving dockable objects


  5. Valeri Hristov
    Admin
    Valeri Hristov avatar
    2252 posts

    Posted 05 Jun 2007 Link to this post

    Hello sky35366,

    It appears that this is a problem in RadDock, which is related to the fixed height of the RadDockZone controls: when you set height of a zone, it will automatically apply overflow-y:auto. This behavior is by design: the zone cannot increase its size when there are more docks inside and that's why it displays a vertical scrollbar. However, it seems that IE reserves space for the scrollbar, even when it is invisible. I can offer two solutions to the problem:
    1) Set style="overflow-x:hidden;" to the zones
    2) Use the MinHeight property instead of Height.

    Let me know if you need additional assistance.

    Best wishes,
    Valeri Hristov (Senior Developer, MCSD)
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. sky35366
    sky35366 avatar
    10 posts
    Member since:
    Jun 2007

    Posted 05 Jun 2007 Link to this post

    I erased the heigh property nd used the minheight insted as you suggested. Everything works fine now. Thankyou.
  7. sky35366
    sky35366 avatar
    10 posts
    Member since:
    Jun 2007

    Posted 09 Jun 2007 Link to this post

    A similar problem occurs with the raddock control, only this time it's a horizontal scrollbar and it appears when you click on a link in the raddock and the raddock has a specified width.

    I have been able to eliminate the problem by removing any specification of the width of the raddock.

    My advise to all is to let the contents of your raddock determine the width of the control itself, unless of course the raddock can be docked in zones a lot bigger than its contents.
  8. sky35366
    sky35366 avatar
    10 posts
    Member since:
    Jun 2007

    Posted 09 Jun 2007 Link to this post

    The problem is related to having the link too close to the bottom (happens only in firefox) and a better way to solve it is to apply some padding to the bottom of the link. 5 pixels was enough in my case.
  9. LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 20 Aug 2007 Link to this post

    I'm running into the opposite problem with IE vs. Firefox.

    I have a gadget that is too wide to display inside the dock according to the widths I'm using.  In Firefox, I get a horizontal scrollbar, but in IE (6 and 7) the width of the dock/zone increases to accommodate the width of the gadget.  Is there a setting or something that will make IE present a horizontal scroll bar instead of making the page too wide?

    (Yes, horizontal scroll bars are bad, but some things are out of my control!)

    Thanks.
    --Barry
  10. Petya
    Admin
    Petya avatar
    869 posts

    Posted 22 Aug 2007 Link to this post

    Hi Barry,

    To get the desired appearance, you need to set overflow-x a value "auto" of the .rdContent class. You can do so either by modifying the Skins/Dock.css file or adding the following style tag the the head of the page:

    <style type="text/css">
        .rdContent
        {
            overflow-x: auto !important;
        }
    </style>

    Hope this helps.

    Kind regards,
    Petya
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017