Hello,
I am trying, without success, to get the scroll bars to appear properly on my page. Here's the scenario,
- A default page divided into a header, left nav bar and main content area. The left nav bar has a radtabstrip with each tab linked to a radpageview within a radmultipage that is in the main content area.
- Each radpageview has a contenturl that loads another page into it
- The page loaded into the radpageview has a radsplitter with various radpanes and radpanelbars within it
What I want is for the radpageview to occupy 100% of the main content area width and height and for the page loaded into it to scroll up and down within in this area. I've tried many different combinations of setting the heights of the different components on the different pages, but am unable to get the desired result. I get either multiple right scroll bars or the page doesn't resize properly when the browser is resized or content is off the bottom of the window and can't be scrolled to.
Can you suggest the best method of setting the heights and scroll bar properties of each element? What should be fixed, auto, on and off, etc.
Thank you,
John
8 Answers, 1 is accepted
0
Hi,
Correct me if I am wrong, but if I understand your scenario correctly you have multiple nested RadSplitters and RadMultiPage nested inside one of the panes.
For scenarios where a content placed inside RadPane have to control its scrolling (as in the described case, the scrolling should be controlled by the PageView's content) the recommended approach is to set parent pane's Scrolling property to None.
For your convenience I have attached sample page trying to replicate the described layout. Please examine and compare the structure with your specific layout requirements. If there are any major differences, could you please open formal support ticket and provide modified page demonstrating the experienced issues?
Regards,
Dobromir
the Telerik team
Correct me if I am wrong, but if I understand your scenario correctly you have multiple nested RadSplitters and RadMultiPage nested inside one of the panes.
For scenarios where a content placed inside RadPane have to control its scrolling (as in the described case, the scrolling should be controlled by the PageView's content) the recommended approach is to set parent pane's Scrolling property to None.
For your convenience I have attached sample page trying to replicate the described layout. Please examine and compare the structure with your specific layout requirements. If there are any major differences, could you please open formal support ticket and provide modified page demonstrating the experienced issues?
Regards,
Dobromir
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
John Mann
Top achievements
Rank 1
Rank 1
answered on 09 Jul 2012, 03:39 PM
Thank for the response. I was able to successfully run the sample you sent me, and after much experimenting, commenting out code and changing values I was able to get that method to work in my project as well. It turns out the thing that was preventing it from working was this line,
<meta http-equiv="x-ua-compatible" content="IE=8" />
Without that line in the master page the panels correctly set their height to 100%. The browsers in our environment are set up to run in IE8 Compat View/IE7 Standards mode (out of my control) and because of the behavior of some Telerik controls I need to put the above line in so that they display properly. Unfortunately when I do that the panel sizing doesn't work properly. Setting the height an absolute value works as expected, but when set to 100% the various components display as either 150px, 300px or 400px tall. The sample page you sent me worked with the line added, so it may be a combination of components I'm using. I may be able to get it to work by removing that line from the master page and using it just in the pages that have a problem with IE8 Compat View/IE7 Standards mode, but in anycase something is going on involving panel sizing and browser mode. Any ideas?
Thanks,
John
<meta http-equiv="x-ua-compatible" content="IE=8" />
Without that line in the master page the panels correctly set their height to 100%. The browsers in our environment are set up to run in IE8 Compat View/IE7 Standards mode (out of my control) and because of the behavior of some Telerik controls I need to put the above line in so that they display properly. Unfortunately when I do that the panel sizing doesn't work properly. Setting the height an absolute value works as expected, but when set to 100% the various components display as either 150px, 300px or 400px tall. The sample page you sent me worked with the line added, so it may be a combination of components I'm using. I may be able to get it to work by removing that line from the master page and using it just in the pages that have a problem with IE8 Compat View/IE7 Standards mode, but in anycase something is going on involving panel sizing and browser mode. Any ideas?
Thanks,
John
0
John Mann
Top achievements
Rank 1
Rank 1
answered on 09 Jul 2012, 10:25 PM
Another problem is that when this method is used with a master page that has headers and footers, the space used by the header and footer is not taken into account when the splitter calculates what 100% height is. So the content area is pushed down off the bottom of the page by the height of the header and the bottom of the splitter and the footer are inaccessible.
0
Hello John,
In order to use only the space between the header and the footer, you have two possible options:
For your convenience I modified the previous sent project to a point, where it includes a master page and the content is placed between a header and a footer (you could see the both approaches).
About your second issue: This behavior is most probably not connected with Telerik RadControls, because, as you already said, the mentioned meta tag is working properly in the sample project. I could suggest you to try it one more time after you set the HeightOffset property, and if it's not working again - try with this one (force the browser to render the page as in the latest browser version) :
All the best,
Veselina
the Telerik team
In order to use only the space between the header and the footer, you have two possible options:
- In the first one, you use the same layout as yours - an additional RadSplitter with three RadPanes, containing the header, the content and the footer respectively. The important thing in this approach is setting the height of the content parent elements (more information in here)
- In the second one, we use two additional divs with fixed height, and a RadSplitter containing the main content. You should set the HeightOffset property of the RadSplitter holding the content. The HeightOffset is set to specify a number of pixels that are subtracted from the splitter height. I added a fixed height to the footer, so in this case the pixels we want to ignore are equal to 300 ( header height + footer height). I would recommend you to see the details here: Specifying Size.
For your convenience I modified the previous sent project to a point, where it includes a master page and the content is placed between a header and a footer (you could see the both approaches).
About your second issue: This behavior is most probably not connected with Telerik RadControls, because, as you already said, the mentioned meta tag is working properly in the sample project. I could suggest you to try it one more time after you set the HeightOffset property, and if it's not working again - try with this one (force the browser to render the page as in the latest browser version) :
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />All the best,
Veselina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
John Mann
Top achievements
Rank 1
Rank 1
answered on 17 Jul 2012, 10:50 PM
Thank you! I used the second approach and it worked perfectly.
Just one problem remaining that I haven't been able to figure out .When width is set to 100% it seems calculate the width value in pixels before it determines whether a vertical scroll bar is required. If a vertical scroll bar is needed it makes the width of the display narrower so that a horizontal scroll bar is then needed. I want there to never be a horizontal scroll bar. The content should resize its width if the height of the content increases to the point where a vertical scroll bar is added.
Thanks,
John
Just one problem remaining that I haven't been able to figure out .When width is set to 100% it seems calculate the width value in pixels before it determines whether a vertical scroll bar is required. If a vertical scroll bar is needed it makes the width of the display narrower so that a horizontal scroll bar is then needed. I want there to never be a horizontal scroll bar. The content should resize its width if the height of the content increases to the point where a vertical scroll bar is added.
Thanks,
John
0
Hi John,
If I understand the issue correctly, you don't want to have a vertical scroll bar around your RadPageView content (placed in your main content RadPane).
The best practice to avoid this behavior (when you have a RadSplitter with Width and Height set to 100%) is to leave the scrolling only to your RadSplitter and to add a CSS class to your RadMultiPage and every RadPageView, setting their overflow property to hidden:
Let me know whether the proposed solution helps.
All the best,
Veselina
the Telerik team
If I understand the issue correctly, you don't want to have a vertical scroll bar around your RadPageView content (placed in your main content RadPane).
The best practice to avoid this behavior (when you have a RadSplitter with Width and Height set to 100%) is to leave the scrolling only to your RadSplitter and to add a CSS class to your RadMultiPage and every RadPageView, setting their overflow property to hidden:
.hidden{ overflow:hidden;}<telerik:RadMultiPage ID="contentMultiPage" runat="server" Height="100%" SelectedIndex="0" CssClass="hidden"> <telerik:RadPageView ID="content1PageView" runat="server" Height="100%" ContentUrl="Page1.aspx" CssClass="hidden"></telerik:RadPageView> <telerik:RadPageView ID="content2PageView" runat="server" Height="100%" ContentUrl="Page2.aspx" CssClass="hidden"></telerik:RadPageView></telerik:RadMultiPage>Let me know whether the proposed solution helps.
All the best,
Veselina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
John Mann
Top achievements
Rank 1
Rank 1
answered on 21 Jul 2012, 12:37 AM
Thank you for the response, however that's not quite the problem I'm experiencing. Let's say I have a page and the content loads into it without the need for any scroll bars. The height of the content is less than the height of the window and the width adjusts itself to 100%. Now if I drag the bottom edge of the browser window up so the content is now taller than the display area it will correctly display a vertical scroll bar. the problem is that the width does not adjust itself to the new, narrower display area and instead it displays a horizontal scroll bar so that the window can be scrolled right and left the 14px or so that the vertical scroll bar consumed.
I'd like for the width to adjust itself so that there is no need for a horizontal scrollbar.
Thanks,
John
I'd like for the width to adjust itself so that there is no need for a horizontal scrollbar.
Thanks,
John
0
Hello John,
Please excuse us, but it seems that the previously suggested solution works everywhere, except in IE 7. The issue that you experience is a browser behavior and it can't be manipulated by RadControls. That happens because in IE 7 the scroll bar's size is calculated and rendered as a part of its containing element.
For your convenience I prepared a sample project, including only a RadSplitter with two RadPanes and a fix- sized div inside one of them, so you can see how the scroll bar is behaving ( you can see a video, demonstrating it in Mozilla Firefox 13, Chrome 20, Opera 12, IE 9, IE 8 and IE 7).
As a workaround i could only suggest you to try with this meta tag, so the page won't be forced by the IE 7's standards due to the meta tag that you were using:
All the best,
Veselina
the Telerik team
Please excuse us, but it seems that the previously suggested solution works everywhere, except in IE 7. The issue that you experience is a browser behavior and it can't be manipulated by RadControls. That happens because in IE 7 the scroll bar's size is calculated and rendered as a part of its containing element.
For your convenience I prepared a sample project, including only a RadSplitter with two RadPanes and a fix- sized div inside one of them, so you can see how the scroll bar is behaving ( you can see a video, demonstrating it in Mozilla Firefox 13, Chrome 20, Opera 12, IE 9, IE 8 and IE 7).
As a workaround i could only suggest you to try with this meta tag, so the page won't be forced by the IE 7's standards due to the meta tag that you were using:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />All the best,
Veselina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.