Fullscreen problem

[Joeri]

with this code :

	<telerik:RadSplitter ID="rsSS" runat="server" BorderSize="0" Orientation="Horizontal" FullScreenMode="true" EnableEmbeddedSkins="false" Skin="DnsReg">
	<telerik:RadPane ID="rpSSHeader" runat="server" Locked="true" Height="70px">
	header
	</telerik:RadPane>
	<telerik:RadSplitBar ID="rsp" runat="server" />
	<telerik:RadPane ID="rpSSBody" runat="server" Locked="true" Scrolling="None">
	<telerik:RadSplitter ID="rsMain" runat="server" BorderSize="0" FullScreenMode="true" EnableEmbeddedSkins="false" Skin="DnsReg" Orientation="Vertical">
	<telerik:RadPane ID="rpOverviewItems" runat="server" BorderWidth="0">
	<telerik:RadSlidingZone ID="rszDomains" runat="server" Width="20px" ClickToOpen="false" DockedPaneId="rpDomains">
	<telerik:RadSlidingPane ID="rpDomains" runat="server" CssClass="slidingPane" Width="180px" DockText="Domains" Title="Domains">
	test 1<br />
	test 3
	</telerik:RadSlidingPane>
	<telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" CssClass="slidingPane" Width="180px" DockText="Hosting" Title="Hosting">
	test 1<br />
	<asp:LinkButton ID="lbKlikHier" runat="server" Text="Klik hier" OnClick="lbKlikHier_Click" />
	</telerik:RadSlidingPane>
	</telerik:RadSlidingZone>
	</telerik:RadPane>
	<telerik:RadSplitBar ID="rsb1" runat="server" CssClass="test" />
	<telerik:RadPane ID="RadPane1" runat="server">
	<asp:Panel ID="pnlPage" runat="server">
	<telerik:RadSplitter ID="rp" runat="server" ResizeWithParentPane="true" PanesBorderSize="0">
	<telerik:RadPane ID="rpPage" runat="server" ContentUrl="test.aspx" />
	</telerik:RadSplitter>
	</asp:Panel>
	<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Style="padding-top: 125px;" Height="75px" Width="75px" Transparency="6" BackColor="White">
	<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading1.gif") %>' style="border:0;" />
	</telerik:RadAjaxLoadingPanel>
	</telerik:RadPane>
	</telerik:RadSplitter>
	</telerik:RadPane>
	</telerik:RadSplitter>

I have this result : http://www.x-it.be/fullscreen.jpg

So my fullscreen function doesn't work ... and I don't understand why ? Could somebody explain me what the problem is ?

[Svetlina Anati]

Hi Joeri,

I examined the provided code and I suggest to go through the following steps:

1. Remove the FullScreenMode property from all the splitters. Set the outest parent splitter's Width and Height properties to 100% and if it is nested in another element, e.g DIV, set explicitly its height, too (do this for all the parent elements of the outest RadSplitter).

2. Put the following style in the page's head section:

<style>  
html, body, form  
{  
  height: 100%;  
  margin: 0px;  
  padding: 0px;  
}  
</style> 

3. Do not set any sizes to the nested splitters if they are directly nested in a RadPane  - when a RadSplitter is directly nested in a RadPane, it automatically resizes itself to occupy 100% of the parent pane. If you set width, height, fullscreenmode, the splitters will make a lot of calculations to resize themselves and this is not necessary and slows down the performance significantly. If the nested splitters are not directly nested in a RadPane but in another element, set their sizes and also set the ResizeWithParentPane property to false.

4. I also noticed that you have only two radPanes in the outest splitter and you have set Locked=true for both of them - this is invalid - having only one of them locked is enough to not let the other one be changed.

For your convenience I attached your modified page (I removed the custom skins settings in order to visualize the splitters). 

Kind regards,

Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Joeri]

I have now another problems in FireFox :

Printscreen : http://www.x-it.be/scrollbars.jpg

I have a 1 pixel white border in my iFrame. I can't find the problem in the css

[Svetlina Anati]

Hello Joeri,

I was able to reproduce the problem, your layout is very complex and the problem is due to complicated calculaton of sizes of multiple nested splitters.  I suggest to put the following style in your page's head:

 .RadSplitter_[Your_Skin_Name].nested
    {
      margin: 0px !important;
    }

For the attached in my previous post particular page, the style should look like the following:

 .RadSplitter_Default.nested
    {
      margin: 0px !important;
    }

Best wishes,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Trent]

Great!  The:

 

 

<style type="text/css">

 

 

html, body, form

 

{

 

height: 100%;

 

 

margin: 0px;

 

 

padding: 0px;

 

}

 

</style>

Fixed the the issue I was having.

Thanks

 

[Svetlina Anati]

Hi Trent,

I am glad that the provided solution helped you achieve the desired result. However, in order to be precise enough and for others who might encounter the same problem, this style will not solve all the layout problems. In order to correctly configure the RadSplitter in percentages, one should set explicit height (either in percentages or pixels) to all the splitter's parent elements, not only the html, body and form, but also to DIV, TD, TR, TABLE, etc if there are such.

An online demo which explains the full screen setup is available below:

http://demos.telerik.com/aspnet-ajax/splitter/examples/resizewithwindow/defaultcs.aspx

Sincerely yours,
Svetlina
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.