I'm using the 2008.2.826.35 version of the RadControls. My problem can be explained in comparing the following three screen shots:
http://lscs.byu.edu/Chris/Splitter/IE.jpg
http://lscs.byu.edu/Chris/Splitter/Safari.jpg
http://lscs.byu.edu/Chris/Splitter/Firefox.jpg
My code can be found here: Link removed by Admin.
The splitter is in the master page. The commented out div around the splitter doesn't seem to make a difference.
Notice how in Firefox that the full screen mode fills the whole screen and doesn't respect some div boundaries that I have set. The other two browsers seem to be fine. Is there are work around for this? If not, is this problem fixed in the newest build? I have already tried not doing full screen mode and setting width and height to 100%, but as soon as I set the height to any percentage value, firefox (I'm using 3.0.6) wigs out and shrinks the splitter to just about nothing.
http://lscs.byu.edu/Chris/Splitter/Safari.jpg
http://lscs.byu.edu/Chris/Splitter/Safari.jpg
http://lscs.byu.edu/Chris/Splitter/IE.jpg
http://lscs.byu.edu/Chris/Splitter/Safari.jpg
http://lscs.byu.edu/Chris/Splitter/Firefox.jpg
My code can be found here: Link removed by Admin.
The splitter is in the master page. The commented out div around the splitter doesn't seem to make a difference.
Notice how in Firefox that the full screen mode fills the whole screen and doesn't respect some div boundaries that I have set. The other two browsers seem to be fine. Is there are work around for this? If not, is this problem fixed in the newest build? I have already tried not doing full screen mode and setting width and height to 100%, but as soon as I set the height to any percentage value, firefox (I'm using 3.0.6) wigs out and shrinks the splitter to just about nothing.
http://lscs.byu.edu/Chris/Splitter/Safari.jpg
http://lscs.byu.edu/Chris/Splitter/Safari.jpg
5 Answers, 1 is accepted
0
Hello Chris,
First of all, please do not post links to applications, containing DEV version of the controls in the forums.
Ragarding the problem you describe - it is caused from by the FullScreenMode property that you have applied to your main RadSplitter:
As soon as you remove this property (use Height=100% instead), you will get the expected result. I noticed that you have not configured your page correctly for the RadSplitter to occupy 100% of the height of its parent - please refer to our Resize with window online example for information how to do this.
You can additionally use the HeightOffset property to make the RadSplitter 100% high, minus the height of the RadMenu. Please refer to our Making RadSplitter occupy part of a page with variable size online article for additional information.
In order to hide the initial resize operations of the RadSplitter, you can set VisibleDuringInit="false".
I have attached a modified version of your project, demonstrating the suggestion changes.
Sincerely yours,
Tsvetie
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
First of all, please do not post links to applications, containing DEV version of the controls in the forums.
Ragarding the problem you describe - it is caused from by the FullScreenMode property that you have applied to your main RadSplitter:
| <telerik:RadSplitter ID="rsSplitterPane" runat="server" Skin="Telerik" BorderSize="0" |
| Width="99%" FullScreenMode="true" ResizeWithParentPane="false"> |
As soon as you remove this property (use Height=100% instead), you will get the expected result. I noticed that you have not configured your page correctly for the RadSplitter to occupy 100% of the height of its parent - please refer to our Resize with window online example for information how to do this.
You can additionally use the HeightOffset property to make the RadSplitter 100% high, minus the height of the RadMenu. Please refer to our Making RadSplitter occupy part of a page with variable size online article for additional information.
In order to hide the initial resize operations of the RadSplitter, you can set VisibleDuringInit="false".
I have attached a modified version of your project, demonstrating the suggestion changes.
Sincerely yours,
Tsvetie
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
jian
Top achievements
Rank 1
Rank 1
answered on 13 Mar 2009, 12:36 AM
Hi, I am new to this forum, and having a very similar problem. I am trying to make it fits the full screen, it works great on IE, but doesn't work on firefox, where it shrinks the lower panel as half of the screen. I also tried to set the height = "100%", it doesn't even work on IE. Besides, if i set the VisibleDuringInit to false, none of the panel would show up. Here is the master page I am having, please help me.
| <telerik:radsplitter id="RadSplitter2" Orientation="Horizontal" runat="server" EnableViewState="true" |
| FullScreenMode="true" ResizeWithParentPane="false"> |
| <telerik:radpane id="Radpane2" runat="server" Height = "80"> |
| <asp:contentplaceholder ID="HeaderContent" runat="server"> |
| </asp:contentplaceholder> |
| </telerik:radpane> |
| <telerik:radsplitbar id="RadSplitBar2" runat="server" Visible="false" collapsemode="Forward"></telerik:radsplitbar> |
| <telerik:radpane id="Radpane3" Height="100%" runat="server"> |
| <telerik:radsplitter id="RadSplitter1" Orientation="Vertical" runat="server" EnableViewState="true"> |
| <telerik:radpane id="LeftPane" runat="server" width="280"> |
| <asp:contentplaceholder ID="LeftContent" runat="server"> |
| </asp:contentplaceholder> |
| </telerik:radpane> |
| <telerik:radsplitbar id="RadSplitBar1" runat="server" collapsemode="Forward"></telerik:radsplitbar> |
| <telerik:radpane id="Radpane1" runat="server"> |
| <asp:contentplaceholder ID="MainContent" runat="server"> |
| </asp:contentplaceholder> |
| </telerik:radpane> |
| </telerik:radsplitter> |
| </telerik:radpane> |
| </telerik:radsplitter> |
0
Hello,
As I already mentioned in my previous post, when you set Height=100% for the RadSplitter (or any other control, e.g. a simple DIV element), you have to set the height of all its parents as well. Please review our Resize with window online example for information how to do this. In case this does not help you, please send me the whole code of your page as well as all the CSS styles that you use and I will help you get the expected result.
Regarding the problem with the VisibleDuringInit property - the bug you describe was introduced with the official Q3 2008 release. You can find detailed information about it, as well as a workaround, in the forums. However, in case you just upgrade your version to a later one - Q3 2008 SP1, Q3 2008 SP2, Q1 2009, you will not need to apply a workaround as the problem is fixed in them.
Regards,
Tsvetie
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.
As I already mentioned in my previous post, when you set Height=100% for the RadSplitter (or any other control, e.g. a simple DIV element), you have to set the height of all its parents as well. Please review our Resize with window online example for information how to do this. In case this does not help you, please send me the whole code of your page as well as all the CSS styles that you use and I will help you get the expected result.
Regarding the problem with the VisibleDuringInit property - the bug you describe was introduced with the official Q3 2008 release. You can find detailed information about it, as well as a workaround, in the forums. However, in case you just upgrade your version to a later one - Q3 2008 SP1, Q3 2008 SP2, Q1 2009, you will not need to apply a workaround as the problem is fixed in them.
Regards,
Tsvetie
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
Gene
Top achievements
Rank 1
Rank 1
answered on 25 Mar 2009, 09:47 PM
Hello,
I have a similar issue. I have nested splitters that don't seem to be working together.
Basically, I have an outer splitter with a top and bottom pane that is set to 100% height and width. Inside the bottom pane, I have another splitter with a left and right pane, also set to 100% width and height. Inside the left pane of THAT splitter, I have another splitter, this one after a header, so it is not directly nested inside its parent splitter. I have read a few posts on here that have helped me get close to the desired result, but I'm having cross-browser issues. The innermost splitter is supposed to take up as much of the height of its pane as possible, minus the header. So, I set height to 100%, with a HeightOffset equal to my header height. This works in IE 7, but not in Firefox 3. In Firefox 3, the pane seems to shrink-wrap to its content, and I never get any scrollbars if the content of that pane goes beyond the parent splitter's height (off the browser page, which is set to overflow: hidden, so I lose content).
Here's an example of what I've got:
I am stumped as to what is causing this cross-browser issue.
I am using 2009 Q1 Trial version of the ASP .NET Ajax RadControls. (my company will be buying this kit in the next few days, but we needed to get going on development).
Any help is appreciated!
Thanks,
Gene
I have a similar issue. I have nested splitters that don't seem to be working together.
Basically, I have an outer splitter with a top and bottom pane that is set to 100% height and width. Inside the bottom pane, I have another splitter with a left and right pane, also set to 100% width and height. Inside the left pane of THAT splitter, I have another splitter, this one after a header, so it is not directly nested inside its parent splitter. I have read a few posts on here that have helped me get close to the desired result, but I'm having cross-browser issues. The innermost splitter is supposed to take up as much of the height of its pane as possible, minus the header. So, I set height to 100%, with a HeightOffset equal to my header height. This works in IE 7, but not in Firefox 3. In Firefox 3, the pane seems to shrink-wrap to its content, and I never get any scrollbars if the content of that pane goes beyond the parent splitter's height (off the browser page, which is set to overflow: hidden, so I lose content).
Here's an example of what I've got:
| <!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 id="Head1" runat="server"> |
| <title>Verizon Sell One More [VZLeads]</title> |
| <style type="text/css"> html, body, form { height:100%; margin:0px; padding:0px; overflow:hidden; } </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| <Scripts> |
| <asp:ScriptReference Path="~/scripts/jquery-1.3.2.js" /> |
| </Scripts> |
| </telerik:RadScriptManager> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" Orientation="Horizontal" ResizeWithBrowserWindow="true"> |
| <telerik:RadPane ID="_topPane" runat="server" Height="150px" Scrolling="None"> |
| <div id="header"> |
| <asp:Image ID="imgBanner" runat="server" ImageUrl="images/banner_0508.jpg" AlternateText="" /> |
| </div> |
| <telerik:RadTabStrip ID="_manageRefTabCtl" |
| runat="server" |
| MultiPageID="RadMultiPage1" |
| SelectedIndex="1" |
| EnableEmbeddedSkins="false" |
| Skin="RedCurved" |
| Width="600" |
| Style="float: right;"> |
| <Tabs> |
| <telerik:RadTab runat="server" Text="My Work" PageViewID="RadPageView1"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Selected="true" Text="Manage Work" PageViewID="RadPageView2"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Text="E-mail" PageViewID="RadPageView3"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Text="Search" PageViewID="RadPageView4"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Text="Address Book" PageViewID="RadPageView5"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Text="Reports" PageViewID="RadPageView6"> |
| </telerik:RadTab> |
| </Tabs> |
| </telerik:RadTabStrip> |
| <h1 id="pageHeader">Header</h1> |
| </telerik:RadPane> |
| <telerik:RadPane ID="_bottomPane" runat="server" Scrolling="None"> |
| <telerik:RadSplitter ID="_nestedSplitter" runat="server" VisibleDuringInit="false"> |
| <telerik:RadPane ID="_leftPane" runat="server" Scrolling="None" Width="80%" MinWidth="400"> |
| <telerik:RadAjaxPanel ID="UpdatePanel1" runat="server"> |
| <telerik:RadMultiPage ID="RadMultiPage1" Runat="server"> |
| <telerik:RadPageView ID="RadPageView1" runat="server"> |
| Test |
| </telerik:RadPageView> |
| <telerik:RadPageView Selected="true" ID="RadPageView2" runat="server"> |
| <telerik:RadTabStrip ID="_manageWorkTabCtl" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0" Orientation="HorizontalBottom" Style="float: right;"> |
| <Tabs> |
| <telerik:RadTab runat="server" Text="By Referral" PageViewID="RadPageView1" Selected="true"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Text="By Queue" PageViewID="RadPageView2"> |
| </telerik:RadTab> |
| </Tabs> |
| </telerik:RadTabStrip> |
| <telerik:RadMultiPage ID="RadMultiPage1" Runat="server"> |
| <telerik:RadPageView ID="RadPageView1" runat="server" Selected="true"> |
| test |
| </telerik:RadPageView> |
| <telerik:RadPageView ID="RadPageView2" runat="server"> |
| <h2>Assign Sales Reps to Queues</h2> |
| <telerik:RadSplitter ID="RadSplitter2" Runat="server" Skin="Vista" ResizeWithParentPane="false" Width="100%" Height="100%" HeightOffset="100"> |
| <telerik:RadPane ID="_leftNestedPane" Runat="server" Width="20%" MinWidth="100" MaxWidth="400"> |
| <uc:QueueTree ID="_queueTree" runat="server" /> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar2" Runat="server" /> |
| <telerik:RadPane ID="_rightNestedPane" Runat="server" Width="80%"> |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis nisl. Phasellus malesuada, justo in porta sollicitudin, turpis magna pellentesque lorem, at posuere neque felis in felis. Sed tempor, ante sed viverra blandit, tellus felis ultricies quam, sed sodales nisl orci a neque. Duis laoreet, nulla vel semper dictum, mauris diam malesuada diam, mattis suscipit leo elit id leo. In ut felis. Mauris posuere, justo eu lacinia fermentum, est diam molestie nisl, sed aliquet neque orci a neque. Duis nunc orci, auctor eget, tincidunt nec, ullamcorper quis, tortor. Nunc dictum. Sed volutpat erat eget dolor. Vestibulum venenatis laoreet velit. Phasellus neque nulla, vestibulum a, imperdiet ac, vehicula sit amet, odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras augue. Proin nec magna. Donec ornare condimentum augue. In consectetur scelerisque ligula. |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPageView> |
| </telerik:RadMultiPage> |
| </telerik:RadPageView> |
| </telerik:RadMultiPage> |
| </telerik:RadAjaxPanel> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="_splitBar" CollapseMode="Backward" runat="server" /> |
| <telerik:RadPane ID="_rightPane" runat="server" Scrolling="Y" Width="20%" MinWidth="200"> |
| <uc:MessageCenter ID="_messageCenterCtl" runat="server" /> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
| </html> |
I am stumped as to what is causing this cross-browser issue.
I am using 2009 Q1 Trial version of the ASP .NET Ajax RadControls. (my company will be buying this kit in the next few days, but we needed to get going on development).
Any help is appreciated!
Thanks,
Gene
0
Hi Gene,
First of all, please make sure that you do not have controls with the same IDs - I noticed that you have two controls with ID=RadMultiPage1, ID=RadPageView1 and ID=RadPageView2.
Regarding the innermost RadSplitter - your definition is correct. The problem you describe is caused by the fact that you have not set the height for its parents - RadPageView, RadMultiPage, RadPageView, RadMultiPage, RadAjaxPanel. However, you cannot use Height=100% for all of them, as the RadMultiPage does not have a HeightOffset property as the RadSplitter.
That is why, the easiest way to get the expected result, would be to use another RadSplitter to separate the second RadTabStrip and RadMultiPage:
Kind regards,
Tsvetie
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
First of all, please make sure that you do not have controls with the same IDs - I noticed that you have two controls with ID=RadMultiPage1, ID=RadPageView1 and ID=RadPageView2.
Regarding the innermost RadSplitter - your definition is correct. The problem you describe is caused by the fact that you have not set the height for its parents - RadPageView, RadMultiPage, RadPageView, RadMultiPage, RadAjaxPanel. However, you cannot use Height=100% for all of them, as the RadMultiPage does not have a HeightOffset property as the RadSplitter.
That is why, the easiest way to get the expected result, would be to use another RadSplitter to separate the second RadTabStrip and RadMultiPage:
| <!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 id="Head1" runat="server"> |
| <title>Verizon Sell One More [VZLeads]</title> |
| <style type="text/css"> |
| html, body, form { |
| height:100%; |
| margin:0px; |
| padding:0px; |
| overflow:hidden; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| <Scripts> |
| <asp:ScriptReference Path="~/jquery-1.3.2.js" /> |
| </Scripts> |
| </telerik:RadScriptManager> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" |
| Orientation="Horizontal" ResizeWithBrowserWindow="true"> |
| <telerik:RadPane ID="_topPane" runat="server" Height="150px" Scrolling="None"> |
| <div id="header"> |
| <asp:Image ID="imgBanner" runat="server" ImageUrl="images/banner_0508.jpg" AlternateText="" /> |
| </div> |
| <telerik:RadTabStrip ID="_manageRefTabCtl" runat="server" MultiPageID="RadMultiPage1" |
| SelectedIndex="1" EnableEmbeddedSkins="false" Skin="RedCurved" Width="600" Style="float: right;"> |
| <Tabs> |
| <telerik:RadTab runat="server" Text="My Work" PageViewID="RadPageView1"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Selected="true" Text="Manage Work" PageViewID="RadPageView2"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Text="E-mail" PageViewID="RadPageView3"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Text="Search" PageViewID="RadPageView4"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Text="Address Book" PageViewID="RadPageView5"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Text="Reports" PageViewID="RadPageView6"> |
| </telerik:RadTab> |
| </Tabs> |
| </telerik:RadTabStrip> |
| <h1 id="pageHeader"> |
| Header</h1> |
| </telerik:RadPane> |
| <telerik:RadPane ID="_bottomPane" runat="server" Scrolling="None"> |
| <telerik:RadSplitter ID="_nestedSplitter" runat="server" VisibleDuringInit="false"> |
| <telerik:RadPane ID="_leftPane" runat="server" Scrolling="None" Width="80%" MinWidth="400"> |
| <telerik:RadAjaxPanel ID="UpdatePanel1" runat="server" Height="100%"> |
| <telerik:RadMultiPage ID="RadMultiPage1" runat="server" Height="100%"> |
| <telerik:RadPageView ID="RadPageView1" runat="server"> |
| Test |
| </telerik:RadPageView> |
| <telerik:RadPageView Selected="true" ID="RadPageView2" runat="server" Height="100%"> |
| <telerik:RadSplitter ID="RadSplitter3" runat="server" VisibleDuringInit="false" Orientation="Horizontal" |
| ResizeWithParentPane="false" Width="100%" Height="100%" BorderSize="0"> |
| <telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" Height="30px"> |
| <telerik:RadTabStrip ID="_manageWorkTabCtl" runat="server" MultiPageID="RadMultiPage2" |
| SelectedIndex="0" Orientation="HorizontalBottom" Style="float: right;"> |
| <Tabs> |
| <telerik:RadTab runat="server" Text="By Referral" PageViewID="RadPageView3" Selected="true"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Text="By Queue" PageViewID="RadPageView4"> |
| </telerik:RadTab> |
| </Tabs> |
| </telerik:RadTabStrip> |
| </telerik:RadPane> |
| <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None"> |
| <telerik:RadMultiPage ID="RadMultiPage2" runat="server" Height="100%"> |
| <telerik:RadPageView ID="RadPageView3" runat="server" Selected="true"> |
| test |
| </telerik:RadPageView> |
| <telerik:RadPageView ID="RadPageView4" runat="server" Height="100%"> |
| <h2> |
| Assign Sales Reps to Queues</h2> |
| <telerik:RadSplitter ID="RadSplitter2" runat="server" Skin="Vista" ResizeWithParentPane="false" |
| Width="100%" Height="100%" HeightOffset="100"> |
| <telerik:RadPane ID="_leftNestedPane" runat="server" Width="20%" MinWidth="100" MaxWidth="400"> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar2" runat="server" /> |
| <telerik:RadPane ID="_rightNestedPane" runat="server" Width="80%"> |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis nisl. Phasellus |
| malesuada, justo in porta sollicitudin, turpis magna pellentesque lorem, at posuere |
| neque felis in felis. Sed tempor, ante sed viverra blandit, tellus felis ultricies |
| quam, sed sodales nisl orci a neque. Duis laoreet, nulla vel semper dictum, mauris |
| diam malesuada diam, mattis suscipit leo elit id leo. In ut felis. Mauris posuere, |
| justo eu lacinia fermentum, est diam molestie nisl, sed aliquet neque orci a neque. |
| Duis nunc orci, auctor eget, tincidunt nec, ullamcorper quis, tortor. Nunc dictum. |
| Sed volutpat erat eget dolor. Vestibulum venenatis laoreet velit. Phasellus neque |
| nulla, vestibulum a, imperdiet ac, vehicula sit amet, odio. Vestibulum ante ipsum |
| primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras augue. Proin |
| nec magna. Donec ornare condimentum augue. In consectetur scelerisque ligula. |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPageView> |
| </telerik:RadMultiPage> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPageView> |
| </telerik:RadMultiPage> |
| </telerik:RadAjaxPanel> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="_splitBar" CollapseMode="Backward" runat="server" /> |
| <telerik:RadPane ID="_rightPane" runat="server" Scrolling="Y" Width="20%" MinWidth="200"> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
Kind regards,
Tsvetie
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.