I am attempting to use the splitter control inside a tab but the width is defaulting to a fixed value (398px) rather than the 100% width I've specified. I am using Q1 2010... When I view the generated HTML the <div/> tags for the splitter container and each pane all have a style attribute that specifies width:398px. Any help would be greatly appreciated! Here is a sample page that illustrates what is happening:
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Dialog.aspx.cs" Inherits="TelerikTester.Dialog" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title>Dialog</title> |
| <style type="text/css"> |
| html, body, form |
| { |
| margin:0; |
| padding:0; |
| height: 100%; |
| width: 100%; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server" submitdisabledcontrols="true"> |
| <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" /> |
| </Scripts> |
| </telerik:RadScriptManager> |
| <telerik:RadAjaxManager ID="AjaxManager1" runat="server" /> |
| <telerik:RadSplitter ID="spltMain" runat="server" Width="100%" Height="100%" Orientation="Horizontal" BorderSize="0" BorderStyle="None"> |
| <telerik:RadPane ID="rpHeader" runat="server" Height="60px" MaxHeight="60" Locked="true" Scrolling="None"> |
| Header |
| </telerik:RadPane> |
| <telerik:RadPane ID="rpTabs" runat="server" height="25px" MaxHeight="25" Locked="true"> |
| <div style="height: 100%; vertical-align: bottom;"> |
| <telerik:RadTabStrip ID="rtsDialog" runat="server" Skin="Black" EnableEmbeddedSkins="true" MultiPageID="rmpDialog" SelectedIndex="0"> |
| <Tabs> |
| <telerik:RadTab Text="Tab1" Value="Tab1" Selected="true" PageViewID="rpvTab1" /> |
| <telerik:RadTab Text="Tab2" Value="Tab2" PageViewID="rpvTab2" /> |
| </Tabs> |
| </telerik:RadTabStrip> |
| </div> |
| </telerik:RadPane> |
| <telerik:RadPane ID="rpBody" runat="server" Scrolling="None"> |
| <telerik:RadMultiPage ID="rmpDialog" runat="server" Width="99%" Height="98%" ScrollBars="Vertical" SelectedIndex="0" RegisterWithScriptManager="true" |
| BorderStyle="Solid" BorderWidth="1" BorderColor="#333333" > |
| <telerik:RadPageView ID="rpvTab1" runat="server" Height="100%"> |
| <asp:Panel ID="pnlTab1" runat="server"> |
| Tab1 |
| </asp:Panel> |
| </telerik:RadPageView> |
| <telerik:RadPageView ID="rpvTab2" runat="server"> |
| <telerik:RadSplitter ID="splitTab2" runat="server" Width="100%" Orientation="Horizontal"> |
| <telerik:RadPane ID="paneTab2Filter" runat="server" Width="100%" MaxHeight="200" Scrolling="None"> |
| Filter |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="barTab2" runat="server" CollapseMode="Both" Visible="true" Width="100%" /> |
| <telerik:RadPane ID="paneTab2Grid" runat="server" Scrolling="None" Width="100%"> |
| Grid |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPageView> |
| </telerik:RadMultiPage> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
| </html> |
4 Answers, 1 is accepted
0
Hi Bill,
In this case, you should set ResizeWithParentPane=false for the nested splitter control:
By default, the value of this property is "true" and the parent pane controls the size of the nested splitter. However, as the nested splitter is not a direct child of its parent pane, it should calculate its own size and not expect its parent pane to handle it.
Kind regards,
Tsvetie
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
In this case, you should set ResizeWithParentPane=false for the nested splitter control:
<telerik:RadPageView ID="rpvTab2" runat="server"> <telerik:RadSplitter ID="splitTab2" runat="server" Width="100%" Orientation="Horizontal" ResizeWithParentPane="false"> <telerik:RadPane ID="paneTab2Filter" runat="server" Width="100%" MaxHeight="200" Scrolling="None"> Filter </telerik:RadPane> <telerik:RadSplitBar ID="barTab2" runat="server" CollapseMode="Both" Visible="true" Width="100%" /> <telerik:RadPane ID="paneTab2Grid" runat="server" Scrolling="None" Width="100%"> Grid </telerik:RadPane> </telerik:RadSplitter></telerik:RadPageView>By default, the value of this property is "true" and the parent pane controls the size of the nested splitter. However, as the nested splitter is not a direct child of its parent pane, it should calculate its own size and not expect its parent pane to handle it.
Kind regards,
Tsvetie
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Bill
Top achievements
Rank 2
Rank 2
answered on 24 Mar 2010, 04:09 PM
That did it. Thanks!
0
Tamer Gamal
Top achievements
Rank 1
Rank 1
answered on 14 Jul 2011, 12:51 PM
that solution didn't work in chrome
try this sample with even
the inner pane(RadPane1) don't apply the width ,i set it with 50% but it take over 100%
try this sample with even
ResizeWithParentPane="falsethe inner pane(RadPane1) don't apply the width ,i set it with 50% but it take over 100%
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" ID="test" runat="server"> <telerik:RadSplitter ID="RadSplitter2" runat="server"> <telerik:RadPane ID="RadPane3" runat="server"> <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0"> <Tabs> <telerik:RadTab Text="First"> </telerik:RadTab> <telerik:RadTab Text="Second"> </telerik:RadTab> </Tabs> </telerik:RadTabStrip> <telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="80%" SelectedIndex="0" BorderColor="#91A7B4" BackColor="#F4F4F0" BorderStyle="Solid" BorderWidth="1px" Height="80%"> <telerik:RadPageView ID="PV_Help" runat="server"> <div style="margin: 10px; padding: 10px;"> help text here </div> </telerik:RadPageView> <telerik:RadPageView ID="PV_Administrative" runat="server"> <telerik:RadSplitter ID="RadSplitter1" runat="server" ResizeWithParentPane="false" Height="100%" Width="100%"> <telerik:RadPane ID="RadPane1" runat="server" Width="50%" BackColor="Red"> asdasdfadsf </telerik:RadPane> </telerik:RadSplitter> </telerik:RadPageView> </telerik:RadMultiPage> </telerik:RadPane> <telerik:RadPane ID="RadPane4" runat="server"> </telerik:RadPane> </telerik:RadSplitter></asp:Content>0
Hi Tamer,
In order to configure RadSplitter to use percentage values for its Height property you need to make sure that all its parent elements have set height - in your scenario the RadPageView does not have set Height and this is causing the splitter to incorrectly calculates its size.
To fix this issue you need to set the Height property to the RadPageView containing the nested splitter, e.g.:
Regards,
Dobromir
the Telerik team
In order to configure RadSplitter to use percentage values for its Height property you need to make sure that all its parent elements have set height - in your scenario the RadPageView does not have set Height and this is causing the splitter to incorrectly calculates its size.
To fix this issue you need to set the Height property to the RadPageView containing the nested splitter, e.g.:
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="80%" SelectedIndex="0" BorderColor="#91A7B4" BackColor="#F4F4F0" BorderStyle="Solid" BorderWidth="1px" Height="80%"> <telerik:RadPageView ID="PV_Help" runat="server" Height="300px"> <div style="margin: 10px; padding: 10px;"> help text here </div> </telerik:RadPageView> <telerik:RadPageView ID="PV_Administrative" runat="server" Height="300px"> <telerik:RadSplitter ID="RadSplitter1" runat="server" ResizeWithParentPane="false" Height="100%" Width="100%">Regards,
Dobromir
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!