If a web page element has its height defined in percent
, its parent element must have a height style as well. The rule applies recursively.
You can read about this rule on the W3 site (http://www.w3.org/TR/CSS21/visudet.html#the-height-property
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.
You can refer to this online article (http://demos.telerik.com/aspnet-ajax/Splitter/Examples/ResizeWithWindow/DefaultCS.aspx
) for information as well.
The same is valid when setting the splitter height in percents. In this scenario you should set the height of its parent elements in % (or at least the height of all parent elements until you reach a parent the height of which is set in pixels) - this is a requirement of the HTML specification.
The WebPart is rendered in a DIV element which does not have a fixed size in pixels. See this screenshot: http://screencast.com/t/NqqsvBRHYfot
. This is causing the reported problem. In order to resize the splitter properly, you should explicitly set a fixed size to the WebPart -> Edit -> Modify WebPart -> Height section -> Should the Web Part have a fixed height? -> Choose Yes and specify a fixed height in pixels -> Apply and OK.
the Telerik team