Hi,
I'm evaluating your UI component to replace a frame-based structure.
So far I've achived what I want and it looks good i Firefox 3.0.1 (OS: Vista).
But in IE7 the layout flips out totally.
The RadDocks in the Content RadPane is overlaying the RadPane (z-index problem?) and the scrollbars in the RadPane doesn't scroll its content.
As I mentioned earlier; it looks good in Firefox...
Could you please point me in the right direction to solve this?
Code:
Regards
I'm evaluating your UI component to replace a frame-based structure.
So far I've achived what I want and it looks good i Firefox 3.0.1 (OS: Vista).
But in IE7 the layout flips out totally.
The RadDocks in the Content RadPane is overlaying the RadPane (z-index problem?) and the scrollbars in the RadPane doesn't scroll its content.
As I mentioned earlier; it looks good in Firefox...
Could you please point me in the right direction to solve this?
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"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head id="Head1" runat="server"> |
| <title>Portal with flow layout</title> |
| <style type="text/css"> |
| html, body, form |
| { |
| width: 100%; |
| height: 100%; |
| margin: 0px; |
| padding: 0px; |
| overflow: hidden; |
| } |
| td |
| { |
| vertical-align: top; |
| } |
| .raddock |
| { |
| text-align: left; |
| font: 11px/14px arial,verdana,sans-serif; |
| } |
| .raddockzone |
| { |
| border: 0px !important; |
| padding: 0px !important; |
| overflow: hidden !important; |
| } |
| .raddock .rdTitlebar |
| { |
| height: auto; |
| background-image: none !important; |
| font-size: 1.1em; |
| line-height: 2em; |
| } |
| .raddock .rdTitle |
| { |
| background: none transparent !important; |
| } |
| .raddock div |
| { |
| border-color: silver !important; |
| } |
| .raddock .rdCommands |
| { |
| padding-right: 5px; |
| } |
| .raddock .innerWrp |
| { |
| margin: 0; |
| padding: 10px; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager" runat="server" /> |
| <div id="ParentDivElement" style="height: 100%;"> |
| <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" Orientation="Horizontal" Skin="Outlook"> |
| <telerik:RadPane ID="TopPane" runat="server" Height="100" Scrolling="none"> |
| <!-- Place the content of the pane here --> |
| Logo |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" EnableResize="false" CollapseMode="Backward" /> |
| <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500"> |
| <telerik:RadSplitter ID="NestedSplitter" runat="server" Skin=""> |
| <telerik:RadPane ID="LeftPane" runat="server" Width="150" Scrolling="Y"> |
| <table width="100%"> |
| <tr> |
| <td align="center"> |
| <table align="center" border="0"> |
| <tr> |
| <td align="center"> |
| Menu |
| </td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| </table> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" EnableResize="false" /> |
| <telerik:RadPane ID="ContentPane" runat="server" Scrolling="Both"> |
| <telerik:RadDockLayout runat="server" ID="RadDockLayout1"> |
| <div style="border: 0px solid #f4f4f4; padding: 10px;"> |
| <table cellspacing="0" cellpadding="0" width="100%"> |
| <tr> |
| <td style="width: 33%;"> |
| <telerik:RadDockZone runat="server" ID="RadDockZone1" Orientation="vertical" Style="border: 0px;" FitDocks="true"> |
| <telerik:RadDock runat="server" ID="UserInfo" Title="RadDock 1.1"> |
| <ContentTemplate> |
| <div class="innerWrp"> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| more content |
| <br /> |
| ... |
| <br /> |
| <br /> |
| ... |
| </div> |
| </ContentTemplate> |
| </telerik:RadDock> |
| <telerik:RadDock runat="server" ID="Pictures" Title="RadDock 1.2"> |
| <ContentTemplate> |
| <div class="innerWrp"> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| more content |
| <br /> |
| ... |
| <br /> |
| <br /> |
| </div> |
| </ContentTemplate> |
| </telerik:RadDock> |
| <telerik:RadDock runat="server" ID="Currency" Title="RadDock 1.3"> |
| <ContentTemplate> |
| <div class="innerWrp"> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| more content |
| <br /> |
| ... |
| <br /> |
| <br /> |
| </div> |
| </ContentTemplate> |
| </telerik:RadDock> |
| <telerik:RadDock runat="server" ID="RadDock1" Title="RadDock 1.4"> |
| <ContentTemplate> |
| <div class="innerWrp"> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| more content |
| <br /> |
| ... |
| <br /> |
| <br /> |
| </div> |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </td> |
| <td style="width: 33%;"> |
| <telerik:RadDockZone runat="server" ID="RadDockZone2" Orientation="vertical" Style="border: 0px;" FitDocks="true"> |
| <telerik:RadDock runat="server" ID="Horoscopes" Title="RadDock 2.1"> |
| <ContentTemplate> |
| <div class="innerWrp"> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| more content |
| <br /> |
| ... |
| <br /> |
| <br /> |
| </div> |
| </ContentTemplate> |
| </telerik:RadDock> |
| <telerik:RadDock runat="server" ID="News" Title="RadDock 2.2"> |
| <ContentTemplate> |
| <div class="innerWrp"> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| more content |
| <br /> |
| ... |
| <br /> |
| <br /> |
| ... |
| </div> |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </td> |
| <td style="width: 33%;"> |
| <telerik:RadDockZone runat="server" ID="RadDockZone3" Orientation="vertical" Style="border: 0px;" FitDocks="true"> |
| <telerik:RadDock runat="server" ID="Raddock2" Title="RadDock 3.1"> |
| <ContentTemplate> |
| <div class="innerWrp"> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| more content |
| <br /> |
| ... |
| <br /> |
| <br /> |
| ... |
| </div> |
| </ContentTemplate> |
| </telerik:RadDock> |
| <telerik:RadDock runat="server" ID="Weather" Title="RadDock 3.2"> |
| <ContentTemplate> |
| <div class="innerWrp"> |
| <div class="innerWrp"> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| more content |
| <br /> |
| ... |
| <br /> |
| <br /> |
| </div> |
| </div> |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </td> |
| </tr> |
| </table> |
| </div> |
| </telerik:RadDockLayout> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </div> |
| </form> |
| </body> |
| </html> |
Regards
6 Answers, 1 is accepted
0
Hello Gunnar,
The problem concerning RadDocks not being well positioned - overlaying the corresponding RadPane and RadPane's content not being scrolled, when resizing browser's window for example, is due to the positioning of the RadPanes and that of the RadDockZones. To resolve the problem you should set the position attribute of the content DOM element of the RadPane which contains the RadDockZones to relative, e.g.:
Let us know if you need further assistance.
Best wishes,
Sophy
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
The problem concerning RadDocks not being well positioned - overlaying the corresponding RadPane and RadPane's content not being scrolled, when resizing browser's window for example, is due to the positioning of the RadPanes and that of the RadDockZones. To resolve the problem you should set the position attribute of the content DOM element of the RadPane which contains the RadDockZones to relative, e.g.:
| <telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="" onclientloaded="setPosition"> |
| ... |
| </telerik:RadSplitter> |
| <script type="text/javascript"> |
| function setPosition() |
| { |
| $find("<%=ContentPane.ClientID%>").getContentElement().style.position = "relative"; |
| } |
| </script> |
Let us know if you need further assistance.
Best wishes,
Sophy
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Gunnar
Top achievements
Rank 1
Rank 1
answered on 30 Jul 2008, 11:38 AM
Hi and thanks for the quick, informative and accurate anwer.
Following your instructions made the layout look OK in IE7 but I have a hard time understanding why the behaviour differs between IE7 and FF3.
The little javascript seems a little "magic" for me and I wonder, using your UI components, if the need of these little javascripts is often needed to make behaviour and layout be the same in different browsers? I wish that these little "quirks" could be built in in your components.
One thing with the layout that still doesn't look good is the horizontal scrollbar that appears as soon there's a vertical scrollbar (only IE7, not FF3).
Is there any way to resolve this without using overflow-x:hidden?
It's pretty important to me since it is messing up the design.
Best regards
Gunnar
Following your instructions made the layout look OK in IE7 but I have a hard time understanding why the behaviour differs between IE7 and FF3.
The little javascript seems a little "magic" for me and I wonder, using your UI components, if the need of these little javascripts is often needed to make behaviour and layout be the same in different browsers? I wish that these little "quirks" could be built in in your components.
One thing with the layout that still doesn't look good is the horizontal scrollbar that appears as soon there's a vertical scrollbar (only IE7, not FF3).
Is there any way to resolve this without using overflow-x:hidden?
It's pretty important to me since it is messing up the design.
Best regards
Gunnar
0
Hi Gunnar,
The IE and Firefox are different browsers and their behavior differs in many cases. We are trying to make our controls as much cross-browser as possible so that no external code is needed to make the layout the same in different browsers. However, there are some cases which cannot be handled in the control itself and sometimes it is needed outside manipulation depending on the exact scenario. The issue which you encountered is one of those cases. You can find a KB article which discusses the issue in details.
Regarding the problem you describe that a horizontal scrollbar appears as soon as there's a vertical scrollbar is not related to Telerik's controls themselves. It is a general issue which is due to the width of the table inside the RadDockLayout. The table has 100% width and therefore it takes 100% of the width of the pane. However, the paddings, the margins and the borders set are not included in this width and thus the table takes more than the width of the pane which leads to the appearance of a horizontal scrollbar. That is why, I suggest you set the width of the table to 98% for example. For your convenience I have attached the sample test page which demonstrates the suggested modification.
Kind regards,
Sophy
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
The IE and Firefox are different browsers and their behavior differs in many cases. We are trying to make our controls as much cross-browser as possible so that no external code is needed to make the layout the same in different browsers. However, there are some cases which cannot be handled in the control itself and sometimes it is needed outside manipulation depending on the exact scenario. The issue which you encountered is one of those cases. You can find a KB article which discusses the issue in details.
Regarding the problem you describe that a horizontal scrollbar appears as soon as there's a vertical scrollbar is not related to Telerik's controls themselves. It is a general issue which is due to the width of the table inside the RadDockLayout. The table has 100% width and therefore it takes 100% of the width of the pane. However, the paddings, the margins and the borders set are not included in this width and thus the table takes more than the width of the pane which leads to the appearance of a horizontal scrollbar. That is why, I suggest you set the width of the table to 98% for example. For your convenience I have attached the sample test page which demonstrates the suggested modification.
Kind regards,
Sophy
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Gunnar
Top achievements
Rank 1
Rank 1
answered on 07 Aug 2008, 12:22 PM
Hi,
I tried your solution with width=98%.
Unfortunately this solution isn't good enough to entirely match a framed structure. Sometimes the content pane isn't stretched enough and sometimes you still get the unnecessery horisontal scrollbar if the window is smaller.
The design is of the highest importance to us since we have hundred of large customers using our CRM system. They simply won't accept a new design that not is as good as the old one.
The problem only partly depend on using 100% width. The real problem is how IE interprets documents in "quirks" and "strict" mode. In "quirks" mode it looks ok - no horizontal scrollbar appears. In strict mode the scrollbars appears. IE doesn't make extra space for the vertical scrollbar, it just put it on top, forcing the horizontal scrollbar to appear.
The only solution I can think about (without overflow-x:hidden) is to check if the scrollable div has a vertical scrollbar and if it does - decrease the inner content by the width of the scrollbar width (17px?). We also have to consider browser resizing, collapsing/expanding of other elements in the document to handle this properly.
Here's some pseudo code:
I would be happy to get your thoughts about this.
Regards
Gunnar
I tried your solution with width=98%.
Unfortunately this solution isn't good enough to entirely match a framed structure. Sometimes the content pane isn't stretched enough and sometimes you still get the unnecessery horisontal scrollbar if the window is smaller.
The design is of the highest importance to us since we have hundred of large customers using our CRM system. They simply won't accept a new design that not is as good as the old one.
The problem only partly depend on using 100% width. The real problem is how IE interprets documents in "quirks" and "strict" mode. In "quirks" mode it looks ok - no horizontal scrollbar appears. In strict mode the scrollbars appears. IE doesn't make extra space for the vertical scrollbar, it just put it on top, forcing the horizontal scrollbar to appear.
The only solution I can think about (without overflow-x:hidden) is to check if the scrollable div has a vertical scrollbar and if it does - decrease the inner content by the width of the scrollbar width (17px?). We also have to consider browser resizing, collapsing/expanding of other elements in the document to handle this properly.
Here's some pseudo code:
| var elm = $find('ContentPane').getContentElement(); |
| var elmelmInner = elm.firstChild; |
| if (elm.offsetHeight < elm.scrollHeight) // we have scroll! |
| { |
| elmInnerelmInner.style.width = elmInner.offsetWidth - 17 + 'px'; |
| } |
I would be happy to get your thoughts about this.
Regards
Gunnar
0
Hello Gunnar,
The behavior you observe is a browser issue which is due to the way IE7 handles html element's scrollbars - the vertical scrollbar takes part of the width of the element. If the content of the element takes 100% the appearance of a vertical scrollbar as a result of a longer content leads to the appearance of a horizontal one because the total width becomes more than 100%. If you want to avoid this behavior the easiest solution is to add the content of the pane inside a div element which has a width less than 100% so that the appearance of a vertical scrollbar do not make the width larger than 100%. You will also need to remove the scrolling of this div in order to avoid double scrollbars as the splitter's pane provides scrollbars if needed, e.g:
For your convenience I have attached the test page as well.
If you still experience any design problems, do contact us again.
All the best,
Sophy
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
The behavior you observe is a browser issue which is due to the way IE7 handles html element's scrollbars - the vertical scrollbar takes part of the width of the element. If the content of the element takes 100% the appearance of a vertical scrollbar as a result of a longer content leads to the appearance of a horizontal one because the total width becomes more than 100%. If you want to avoid this behavior the easiest solution is to add the content of the pane inside a div element which has a width less than 100% so that the appearance of a vertical scrollbar do not make the width larger than 100%. You will also need to remove the scrolling of this div in order to avoid double scrollbars as the splitter's pane provides scrollbars if needed, e.g:
| <telerik:RadPane ID="ContentPane" runat="server" Scrolling="Both"> |
| <div style="width:98%;overflow:hidden;"> |
| ... |
| </div> |
| </telerik:RadPane> |
If you still experience any design problems, do contact us again.
All the best,
Sophy
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
modas
Top achievements
Rank 1
Rank 1
answered on 21 Jan 2009, 09:40 AM
Halo all
I am not sure where to write down my problem but I hope someone could help me.
I am using rad controls Q4 2006 with .net 1. I am using the collapsing menu example but I am loading every menu server side using itemtemplate.
Everything works fine excepts that when I am using internet explorer and I click on a node it first collapses but when I expand the same node the menu under It, it disappears.
That’s not happening with Firefox
You can check it online
http://xmoto.miliaresis.gr