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

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

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:


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



Best wishes,
Svetlina
the Telerik team

Great!  The:

 

 

<style type="text/css">

 

 

html, body, form

 

{

 

height: 100%;

 

 

margin: 0px;

 

 

padding: 0px;

 

}

 

</style>

Fixed the the issue I was having.

Thanks

 

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