I have setup a simple vertical splitter. When I change the size of the browser window, the width of the splitter follows the width of the browser window as I intended.
How do I do the same with the height? I can set the height of the splitter to 100% but I am only permitted to set the height of each pane in pixels and not in %.
How do I do the same with the height? I can set the height of the splitter to 100% but I am only permitted to set the height of each pane in pixels and not in %.
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> </Scripts> </telerik:RadScriptManager> <script type="text/javascript"> // Script here </script> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> </telerik:RadAjaxManager> <div style="height:100%"> <telerik:RadSplitter ID="RadSplitter1" Runat="server" Height="100%" Skin="WebBlue" Width="100%" LiveResize="True"> <telerik:RadPane ID="RadPane1" Runat="server" Width="30%" Height="300px" ContentUrl="http://activeminds.ca" Scrolling="None"> </telerik:RadPane> <telerik:RadSplitBar ID="RadSplitBar1" Runat="server"> </telerik:RadSplitBar> <telerik:RadPane ID="RadPane2" Runat="server"> Test content </telerik:RadPane> </telerik:RadSplitter> </div> </form></body></html>3 Answers, 1 is accepted
0
Accepted
Hello David,
When you want a Splitter to take size in percentages, you have to make sure that all of its parent also have size configured in percentages (up to a parent with a fixed size). This includes the html, body and form elements - setting the following CSS will fix the issue with the provided configuration:
You can find useful information on the subject in the following online resources:
Filling the Entire Page
Specifying Size
Resize with Window
Kind regards,
Veselina Raykova
Telerik
When you want a Splitter to take size in percentages, you have to make sure that all of its parent also have size configured in percentages (up to a parent with a fixed size). This includes the html, body and form elements - setting the following CSS will fix the issue with the provided configuration:
html, body, form { width:100%; height:100%; padding:0; margin:0; overflow:hidden; }You can find useful information on the subject in the following online resources:
Filling the Entire Page
Specifying Size
Resize with Window
Kind regards,
Veselina Raykova
Telerik
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 UI for ASP.NET AJAX, subscribe to the blog feed now.
0
David
Top achievements
Rank 1
Rank 1
answered on 03 Mar 2014, 05:22 PM
Thank you. I will soon get more familiar with where to find the documentation I need. :D
0
Hi David,
I am sure you will :) In the meantime, please, feel free to contact us in case any further questions appear.
Kind regards,
Veselina Raykova
Telerik
I am sure you will :) In the meantime, please, feel free to contact us in case any further questions appear.
Kind regards,
Veselina Raykova
Telerik
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 UI for ASP.NET AJAX, subscribe to the blog feed now.