why when we set splitter on 100% height it really have 398px + 1px borders? how to set splitter to 100%?
i followed up this link: http://mono.telerik.com/Splitter/Examples/ResizeWithWindow/DefaultCS.aspx and its working when you have only splitter on the page, but when you set some div's above it all page have 100% plus that divs height :(
4 Answers, 1 is accepted
Hello Milosz,
When you have the RadSplitter configured in percentages, all its parent elements including the body, form and html should have their size explicitly set either in percentages or pixels in order to let the splitter calculate the size it should take. This is not new and I do not know why it worked in your previous version - you can see a sample demo explaining this below:
This being said, you will get the desired behavior not only by adding the following style to your page:
<style type="text/css">
html, body, form
{
height: 100%;
margin: 0;
padding: 0;
}
</style>
as explained in the demo but also set all teh parent's height, e.g as shown below:
<div style="height: 100%">
<telerik:RadSplitter ...........>
.............................
On a side note, I also suggest to set VisibleDuringInit=false for the splitter - this will hide the initial resizing of the splitter from the end user and you will get a better behavior.
I hope that my explanations and suggestions are helpful, let us know if you need further assistance.
Kind regards,
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.
Rank 1
<div style="height: 100px; background-color: yellow">TOP</div>
<div style="height:100%; background-color: green; bottom: 0px; top: 100px">here should be the splitters</div>
splitter will have 100% height of second div BUT whole page will have 100% + 100px of fist div
the problem is that i wan't to have all page 100% because i don't wan't to scroll it down, it have to look like windows application
In this case you can use a splitter and set its HeightOffset property as shown below:
<div style="height: 100px; background-color: yellow">TOP</div>
<telerik:RadSplitter Height=100% Width=100% HeightOffset=100.......>
.............
Note, that this approach removes teh DIV which is parent of the splitter because the real solution is that you should calculate its height through script. In the above suggested configuiration, teh splitter will handle this.
More information about the HeightOffset property is avalilable below:
http://www.telerik.com/help/aspnet-ajax/splitter_layoutsize.html
Kind regards,
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.
Rank 1
Please use this css rule to override the default height: 398px
.rspPane > div
{
height: 42em!important;
overflow:auto!important;
}