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 ?
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 ?
8 Answers, 1 is accepted
0
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
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
0
sky35366
Top achievements
Rank 1
Rank 1
answered on 04 Jun 2007, 10:01 PM
Here is the markup for default2.aspx (stripped down version):
and here is the css file code:
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
| <%@ 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"> |
| |
| </td> |
| </tr> |
| <tr> |
| <td class="srchbar" align="center" colspan="3"> |
| <div id="srch"> |
| </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> |
| <p class="innerWrp"> |
| 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> |
| |
| </center> |
| </div> |
| <center> |
| <div class="footer"> |
| </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
0
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
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
0
sky35366
Top achievements
Rank 1
Rank 1
answered on 05 Jun 2007, 10:05 PM
I erased the heigh property nd used the minheight insted as you suggested. Everything works fine now. Thankyou.
0
sky35366
Top achievements
Rank 1
Rank 1
answered on 09 Jun 2007, 10:23 PM
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.
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.
0
sky35366
Top achievements
Rank 1
Rank 1
answered on 09 Jun 2007, 10:58 PM
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.
0
LeBear
Top achievements
Rank 1
Rank 1
answered on 20 Aug 2007, 09:24 PM
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
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
0
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
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