This is a migrated thread and some comments may be shown as answers.

Pane Height IE Javascript bug

5 Answers 140 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
adam
Top achievements
Rank 1
adam asked on 30 Apr 2008, 03:47 PM
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.


5 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 30 Apr 2008, 04:45 PM
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
0
adam
Top achievements
Rank 1
answered on 30 Apr 2008, 05:12 PM
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.
0
Tsvetie
Telerik team
answered on 01 May 2008, 06:36 AM
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
0
George
Top achievements
Rank 1
answered on 19 Jun 2008, 01:12 PM
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.
0
Tsvetie
Telerik team
answered on 23 Jun 2008, 08:43 AM
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
Tags
Splitter
Asked by
adam
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
adam
Top achievements
Rank 1
George
Top achievements
Rank 1
Share this question
or