Hi,
In my project I have a couple of nested RadSplitters to lay out the pages. Generally it works fine, however there is one prominent issue. When I resize the entire window by dragging the border of my browser it regularly happens that I get an unwanted white space on the right side.
It does not always happen, but if you make the window smaller and smaller it is bound to happen at one point. It goes way immediately when you make the window larger only by the smallest amount.
My guess is that it has something to do with the vertical scrollbar, because the unwanted white space seems to be both the position and the size of it.
Could you please advise me how to avoid this behavior? It would be embarrasing to have to tell out clients that all they have to do is make the window a bit larger again to get rid of the unwanted white space. (As a matter of fact, the overall background in my project is red and the unwanted white space is actually red so it's even more eye catching.)
I have added an archetype example of the page layout I use in my project below.
I also have a related issue, I think. Sometimes it happens that there appear inactive (but visible; greyed-out) vertical and horizontal scroll bars in my browser window when resizing. This does not happen nearly as often as the white space issue, but when it does happen making the window a bit larger does not help. I have te completely refresh to get rid of them. Mayby you can look into that as well if they are indeed related. Or is it better if I create a new support thread for this issue?
Regards,
Mink Bruijninckx
In my project I have a couple of nested RadSplitters to lay out the pages. Generally it works fine, however there is one prominent issue. When I resize the entire window by dragging the border of my browser it regularly happens that I get an unwanted white space on the right side.
It does not always happen, but if you make the window smaller and smaller it is bound to happen at one point. It goes way immediately when you make the window larger only by the smallest amount.
My guess is that it has something to do with the vertical scrollbar, because the unwanted white space seems to be both the position and the size of it.
Could you please advise me how to avoid this behavior? It would be embarrasing to have to tell out clients that all they have to do is make the window a bit larger again to get rid of the unwanted white space. (As a matter of fact, the overall background in my project is red and the unwanted white space is actually red so it's even more eye catching.)
I have added an archetype example of the page layout I use in my project below.
I also have a related issue, I think. Sometimes it happens that there appear inactive (but visible; greyed-out) vertical and horizontal scroll bars in my browser window when resizing. This does not happen nearly as often as the white space issue, but when it does happen making the window a bit larger does not help. I have te completely refresh to get rid of them. Mayby you can look into that as well if they are indeed related. Or is it better if I create a new support thread for this issue?
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ResizeTest.aspx.cs" Inherits="CMS.Views.Tests.ResizeTest" %> |
| <%@ 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 runat="server"> |
| <title></title> |
| <style type="text/css"> |
| html, body {margin:0px; padding:0px;} |
| .Header{ background:#cc0000;} |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="smDefault" runat="server" /> |
| <telerik:RadSplitter ID="rs1stLevel" Runat="server" Width="100%" Height="100%" Orientation="Horizontal" |
| BorderStyle="None" PanesBorderSize="0"> |
| <telerik:RadPane ID="rpHeader" runat="server" Height="50" Scrolling="None" CssClass="Header"> |
| header pane |
| </telerik:RadPane> |
| <telerik:RadPane ID="rpMain" runat="server" Scrolling="None"> |
| <telerik:RadSplitter ID="rs2ndLevel" runat="server" Width="100%" Height="100%" Orientation="Vertical" |
| BorderStyle="None" PanesBorderSize="0"> |
| <telerik:RadPane ID="rpNavigate" runat="server" Width="200" Scrolling="Both"> |
| navigate pane |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="rsbNavigate_Content" runat="server" CollapseMode="Forward" /> |
| <telerik:RadPane ID="rpContent" runat="server" Scrolling="None"> |
| <telerik:RadSplitter ID="rs3rdLevel" runat="server" Width="100%" Height="100%" |
| Orientation="Horizontal" BorderStyle="None" PanesBorderSize="0"> |
| <telerik:RadPane ID="rpSummary" runat="server" Height="100" Scrolling="Both"> |
| summary pane |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="rsbSummary_Details" runat="server" CollapseMode="Forward" /> |
| <telerik:RadPane ID="rpDetails" runat="server" Width="200" Scrolling="Both"> |
| details pane |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
| </html> |
Regards,
Mink Bruijninckx
8 Answers, 1 is accepted
0
Hello Mink,
I assume that you experience the issue under IE6 or IE7 - the descibed behavior is due to browser specific behavior and this happens because of the default overflow settings in IE and is not directly related to the RadSplitter control. In order to fix it, you should set overflow hidden to the html, body and form elements. In case scrollbars are needed, the splitter will generate them.
On a side note, I also tested your demo under FF and IE8 and in order to have the splitter correctly resized in height, you shoudl set all its parent elements heigh, too. This being said, I suggest to include the following style in your page (it will make it cross-browser compliant and will also solve the initial overflow problem you report):
I also suggest to set VisibleDuringInit to false to all your splitters - this will hide the initial resize from the end user and you will get a better behavior.
Best wishes,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
I assume that you experience the issue under IE6 or IE7 - the descibed behavior is due to browser specific behavior and this happens because of the default overflow settings in IE and is not directly related to the RadSplitter control. In order to fix it, you should set overflow hidden to the html, body and form elements. In case scrollbars are needed, the splitter will generate them.
On a side note, I also tested your demo under FF and IE8 and in order to have the splitter correctly resized in height, you shoudl set all its parent elements heigh, too. This being said, I suggest to include the following style in your page (it will make it cross-browser compliant and will also solve the initial overflow problem you report):
| html, body, form |
| { |
| height: 100%; |
| margin: 0; |
| padding: 0; |
| overflow: hidden; |
| } |
I also suggest to set VisibleDuringInit to false to all your splitters - this will hide the initial resize from the end user and you will get a better behavior.
Best wishes,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Computer Surgeon
Top achievements
Rank 1
Rank 1
answered on 08 Jul 2009, 11:34 AM
Hi there,
Try VisibleDuringInit="true" ResizeWithBrowserWindow="true" FullScreenMode="true" to your RadSplitter This might work.
Please let me know if that not works for you.
Try VisibleDuringInit="true" ResizeWithBrowserWindow="true" FullScreenMode="true" to your RadSplitter This might work.
Please let me know if that not works for you.
0
Mink
Top achievements
Rank 1
Rank 1
answered on 09 Jul 2009, 08:13 AM
Hi Computer Surgeon,
I haven't got around trying Svetlina's suggestions up to now yet, but I'll take up your advise as well and try to combine both.
However, are you sure about VisibleDuringInit="true"? Because it contradicts what Svetlina suggests and it's not what I would expect.
Maybe it's a typo? Or is it an essential part of the solution you propose?
I haven't got around trying Svetlina's suggestions up to now yet, but I'll take up your advise as well and try to combine both.
However, are you sure about VisibleDuringInit="true"? Because it contradicts what Svetlina suggests and it's not what I would expect.
Maybe it's a typo? Or is it an essential part of the solution you propose?
0
Mink
Top achievements
Rank 1
Rank 1
answered on 09 Jul 2009, 08:28 AM
I have just implemented Svetlana's suggestions and it works! So thanks.
The VisibleDuringInit="false" didn't seem to do much extra for me, but that's alright. I just leave in there as doesn't do any harm either.
So I didn't continue to try Computer Surgeon's suggestions because I'm already there, but thanks anyways.
The VisibleDuringInit="false" didn't seem to do much extra for me, but that's alright. I just leave in there as doesn't do any harm either.
So I didn't continue to try Computer Surgeon's suggestions because I'm already there, but thanks anyways.
0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
Rank 1
Veteran
Iron
answered on 20 Jan 2010, 07:49 PM
I have encountered the same issue depicted here but the suggested fixes don't seem to work in Firefox 3.5. What happens is, the page loads, then a vertical scrollbar appears briefly and disappears because it isn't necessary, but the space it occupied remains. If the window is resized, then the splitter correctly fills the remaining space that the scrollbar took up. The behavior seems to be correct in IE. I am using the latest relase of the Q3 2009 controls (1314). What I have found is... if the window is made smaller, so that scrollbars MAY be necessary, the scrollbars always appear briefly, and then disappear if not necessary. This leaves the unwanted space. If the window is resized larger, then scrollbars would not be necessary, so they never appear and the whitespace is never created.
I have set the overflow properties as directed in this thread and have also played around with the ResizeWithBrowserWindow attribute to no avail. Again, this only appears to be an issue in Firefox.
I have set the overflow properties as directed in this thread and have also played around with the ResizeWithBrowserWindow attribute to no avail. Again, this only appears to be an issue in Firefox.
0
Hi guys,
Mink, the VisibleDuringInit property determines whether the initial resize of the splitter will be visible or not. This does not influence the calculations of the size but in some scenarios (e.g when there is a lot of HTML in the splitter), the resize is a bit slow (which is expected since a lot of elements should be resized) and this causes undesired visual effect - when you set the property to false, the splitter is hidden during resize and it is shown when the resize has finished which causes a better end result.
Albert, I am not sure why you get the behavior you describe - please test the following demo:
http://demos.telerik.com/aspnet-ajax/splitter/examples/resizewithwindow/fullwindow.aspx
I tested it and I was not able to reproduce the problem. Also, if you have set overflow hidden to the HTML, BODY and FORM elements as explained, there is no way the scrollbar appear - please make sure that you have set this to all the above mentioned elements and not only to some of them.
Regards,
Svetlina
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.
Mink, the VisibleDuringInit property determines whether the initial resize of the splitter will be visible or not. This does not influence the calculations of the size but in some scenarios (e.g when there is a lot of HTML in the splitter), the resize is a bit slow (which is expected since a lot of elements should be resized) and this causes undesired visual effect - when you set the property to false, the splitter is hidden during resize and it is shown when the resize has finished which causes a better end result.
Albert, I am not sure why you get the behavior you describe - please test the following demo:
http://demos.telerik.com/aspnet-ajax/splitter/examples/resizewithwindow/fullwindow.aspx
I tested it and I was not able to reproduce the problem. Also, if you have set overflow hidden to the HTML, BODY and FORM elements as explained, there is no way the scrollbar appear - please make sure that you have set this to all the above mentioned elements and not only to some of them.
Regards,
Svetlina
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.
0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
Rank 1
Veteran
Iron
answered on 26 Jan 2010, 02:38 PM
The provided link isn't a good test since scrollbars are always necessary. Do you have a page that has less content?
0
Hello Albert,
Please, note, that the scrollbars in the provided page are actually generated by the RadPanes and they are not the browser's scrollbars. The problem you describe will cause additional scrollbars to appear, generated by the browser itself. This being said, what you should be testing for is double scrollbar and this does not depend on panes' scrollbars.
Regards,
Svetlina
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.
Please, note, that the scrollbars in the provided page are actually generated by the RadPanes and they are not the browser's scrollbars. The problem you describe will cause additional scrollbars to appear, generated by the browser itself. This being said, what you should be testing for is double scrollbar and this does not depend on panes' scrollbars.
Regards,
Svetlina
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.