Hi,
I have a splitter with two Panes on my page and depending on how much content there is in it I want the splitter to expand completely to prevent a scroll in one of the panes.
It almost work if I set the height of the html, body, form and the splitter tags to 100%.
The problem is when there is more content in one of the panes then the browser window height (100%), then the pane adds a scroll so I get two scrolls, one in the pane and one in the browser. And I just want the browser scroll!
So I tried to replace every height:100% from the html to the splitter tags to min-height:100% instead with no success.
Maybe I missed some property but is it possible to remove the panes scrolls and have the splitter to min-height:100% because I want the splitter to show to the bottom of the page even if there isn't so much content.
Some example code:
Regards,
Mattias
I have a splitter with two Panes on my page and depending on how much content there is in it I want the splitter to expand completely to prevent a scroll in one of the panes.
It almost work if I set the height of the html, body, form and the splitter tags to 100%.
The problem is when there is more content in one of the panes then the browser window height (100%), then the pane adds a scroll so I get two scrolls, one in the pane and one in the browser. And I just want the browser scroll!
So I tried to replace every height:100% from the html to the splitter tags to min-height:100% instead with no success.
Maybe I missed some property but is it possible to remove the panes scrolls and have the splitter to min-height:100% because I want the splitter to show to the bottom of the page even if there isn't so much content.
Some example code:
| <html> |
| <head> |
| <style type="text/css"> |
| html, body, form, .radSplitter, .radSplitterMain, .radSplitterNews { min-height:100% } |
| </style> |
| </head |
| <body> |
| <div style="min-height:100%"> |
| <telerik:RadSplitter ID="RadSplitter1" Runat="server" CssClass="radSplitter" |
| ResizeWithParentPane="False" VisibleDuringInit="false" Width="100%" |
| PanesBorderSize="0" BorderSize="0"> |
| <telerik:RadPane id="MainPane" runat="server" BorderWidth="0" CssClass="radSplitterMain"> |
| text, text, a lot of text!!! |
| </telerik:RadPane> |
| <telerik:RadSplitBar id="RadSplitbar1" runat="server" CollapseMode="Backward"></telerik:RadSplitBar> |
| <telerik:RadPane id="RightPane" runat="server" width="200" Scrolling="None" BorderWidth="0" CssClass="radSplitterNews"> |
| text, text |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </div> |
| </body> |
| </html> |
Regards,
Mattias
2 Answers, 1 is accepted
0
Mattias
Top achievements
Rank 1
Rank 1
answered on 11 Sep 2009, 07:42 AM
Hi again,
I saw that I didn't set Scrolling="None" on the MainPane and after setting that the scroll disappears, thats good! :)
But:
The splitter stays at the (I guess) default height of 400px so it clips the content straight off!? Not good! :(
It feels like this is something that can be solved, can you guys figure out a way to set the splitter of min-height 100% of the window?
I saw that I didn't set Scrolling="None" on the MainPane and after setting that the scroll disappears, thats good! :)
But:
The splitter stays at the (I guess) default height of 400px so it clips the content straight off!? Not good! :(
It feels like this is something that can be solved, can you guys figure out a way to set the splitter of min-height 100% of the window?
0
Hello Mattias,
In order to correctly configure the RadSplitter to occupy 100% of the screen and to have only a single scrollbar when needed, please modify your code in the following manner:
An online example which demosntrates this approach is available below:
http://demos.telerik.com/aspnet-ajax/splitter/examples/resizewithwindow/defaultcs.aspx
Kind 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.
In order to correctly configure the RadSplitter to occupy 100% of the screen and to have only a single scrollbar when needed, please modify your code in the following manner:
| <html> |
| <head> |
| <style type="text/css"> |
| html, body, form |
| { |
| height: 100%; |
| margin: 0; |
| padding: 0; |
| overflow: hidden; |
| } |
| </style> |
| </head> |
| <body> |
| <div style="height: 100%"> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" CssClass="radSplitter" ResizeWithParentPane="False" |
| VisibleDuringInit="false" Width="100%" PanesBorderSize="0" BorderSize="0" Height="100%"> |
| <telerik:RadPane ID="MainPane" runat="server" BorderWidth="0" CssClass="radSplitterMain"> |
| text, text, a lot of text!!! |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Backward"></telerik:RadSplitBar> |
| <telerik:RadPane ID="RightPane" runat="server" Width="200" Scrolling="None" BorderWidth="0" |
| CssClass="radSplitterNews"> |
| text, text |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </div> |
| </body> |
| </html> |
An online example which demosntrates this approach is available below:
http://demos.telerik.com/aspnet-ajax/splitter/examples/resizewithwindow/defaultcs.aspx
Kind 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.