Pane Height IE Javascript bug

[adam]

The height of my Panes in IE goes from declared 100% to some tiny fixed size.

Here is what the page looks like in FF.
FireFox Layout

and here is what the same page looks like in IE6&7
IE Layout

Here is the markup:

	<telerik:RadDockLayout runat="server" ID="RadDockLayout1">
	<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%"
	Orientation="Horizontal">
	<telerik:RadPane ID="RadPane1" runat="server" Scrolling="Y" Height="100%" Width="100%">
	<telerik:RadDockZone runat="server" ID="RadDockZone1">
	<telerik:RadDock runat="server" ID="dock1" Width="100%">
	<ContentTemplate>
	Dock 1: Hello from zone 1
	</ContentTemplate>
	</telerik:RadDock>
	</telerik:RadDockZone>
	</telerik:RadPane>
	<telerik:RadSplitBar ID="RadSplitBar1" runat="server" Width="20" Height="100%" />
	<telerik:RadPane ID="RadPane2" runat="server" Scrolling="Y" Height="100%" Width="100%">
	<telerik:RadSplitter ID="RadSplitter2" runat="server" Width="100%" Height="100%"
	Orientation="Vertical">
	<telerik:RadPane ID="RadPane3" runat="server" Scrolling="Y" Height="100%" Width="25%">
	<telerik:RadDockZone ID="RadDockZone2" runat="server">
	<telerik:RadDock runat="server" ID="dock2" Width="100%">
	<ContentTemplate>
	Dock 3: Hello from zone 2
	</ContentTemplate>
	</telerik:RadDock>
	<telerik:RadDock runat="server" ID="RadDock1" Width="100%">
	<ContentTemplate>
	Dock 4: Hello from zone 2
	</ContentTemplate>
	</telerik:RadDock>
	</telerik:RadDockZone>
	</telerik:RadPane>
	<telerik:RadSplitBar ID="RadSplitBar2" runat="server" Width="20" Height="100%" />
	<telerik:RadPane ID="RadPane4" runat="server" Scrolling="Y" Height="100%" Width="75%">
	<telerik:RadDockZone ID="RadDockZone3" runat="server">
	<telerik:RadDock runat="server" ID="RadDock2" Width="100%">
	<ContentTemplate>
	Dock 5: Hello from zone 3
	</ContentTemplate>
	</telerik:RadDock>
	<telerik:RadDock runat="server" ID="RadDock3" Width="100%">
	<ContentTemplate>
	Dock 6: Hello from zone 3
	</ContentTemplate>
	</telerik:RadDock>
	</telerik:RadDockZone>
	</telerik:RadPane>
	</telerik:RadSplitter>
	</telerik:RadPane>
	</telerik:RadSplitter>
	</telerik:RadDockLayout>

Now i realize this layout has nested splitters, but this problem occurs even with just a single splitter.

The world would be a better place if everyone used FF, but until then we will need to support IE.

[Tsvetie]

Hello adam,
Please refer to this online example for information how you should configure your page, when setting Height=100% for the RadSplitter.

Regards,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[adam]

Tsvetie,
I implemented your suggestion, but still have a problem. I think my pictures may have been misleading... I want to have a layout that flows from top to bottom, like the screenshot from firefox below.

desired layout (firefox)

Here is a screenshot of the IE after your suggestion... I would prefer it to act more like a top down flow layout like in the firefox screenshot.

Thanks for your quick response.

[Tsvetie]

Hello adam,
Do you mean that you wish the RadSplitter to be as high as its content, e.g. the height of the RadDock controls? If this is the expected result, the RadSplitter does not offer such functionality. You can implement it yourself however, by calculating the height of the content of the RadSplitter, and applying that value to the splitter - you can use the ClientLoaded event of the splitter to perform that calculation. Please refer to our online documentation for information on the clientside API of the RadSplitter control. 

Sincerely yours,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[George]

Hi,
I am also using splitter, the isssue is left side pane is small and right side pane is long in height. it works perfectly in FF but in IE it shows the scroll bar on the right side pane, I have also applied all the hooks you mentioned in the following post but in vain.

http://www.telerik.com/demos/aspnet/prometheus/Splitter/Examples/ResizeWithWindow/DefaultCS.aspx

Please help.
Thanks in advance.
George.

[Tsvetie]

Hi George,
As far as I understand you, you have a RadSplitter with Orientation=Horizontal and two RadPanes in that splitter - top and bottom RadPanes (as you write about Height problems, otherwise, the panes will be as high as the splitter). The Height of the two RadPanes is different in FF and IE and the problem is that in IE, you get a scrollbar in your bottom RadPane.

If this is the case, the pane shows scrollbars most probably because of its content. As you do not mention what content you have placed in the problematic RadPane however, I cannot be sure. In case you could provide us with the code that demonstrates the problem, we will do our best to explain the different result and help you get the desired behavior.

Apart from this, you could try setting Scrolling=None for the bottom RadPane, that will hide its scrollbars, but in case you need those, the content will be cut off.

All the best,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center