Pane Height IE Javascript bug

6 posts, 0 answers
  1. adam
    adam avatar
    20 posts
    Member since:
    Dec 2007

    Posted 30 Apr 2008 Link to this post

    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:
    1 <telerik:RadDockLayout runat="server" ID="RadDockLayout1"
    2         <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" 
    3             Orientation="Horizontal"
    4             <telerik:RadPane ID="RadPane1" runat="server" Scrolling="Y" Height="100%" Width="100%"
    5                 <telerik:RadDockZone runat="server" ID="RadDockZone1"
    6                     <telerik:RadDock runat="server" ID="dock1" Width="100%"
    7                         <ContentTemplate> 
    8                             Dock 1: Hello from zone 1 
    9                         </ContentTemplate> 
    10                     </telerik:RadDock> 
    11                 </telerik:RadDockZone> 
    12             </telerik:RadPane> 
    13             <telerik:RadSplitBar ID="RadSplitBar1" runat="server" Width="20" Height="100%" /> 
    14             <telerik:RadPane ID="RadPane2" runat="server" Scrolling="Y" Height="100%" Width="100%"
    15                 <telerik:RadSplitter ID="RadSplitter2" runat="server" Width="100%" Height="100%" 
    16                     Orientation="Vertical"
    17                     <telerik:RadPane ID="RadPane3" runat="server" Scrolling="Y" Height="100%" Width="25%"
    18                         <telerik:RadDockZone ID="RadDockZone2" runat="server"
    19                             <telerik:RadDock runat="server" ID="dock2" Width="100%"
    20                                 <ContentTemplate> 
    21                                     Dock 3: Hello from zone 2 
    22                                 </ContentTemplate> 
    23                             </telerik:RadDock> 
    24                             <telerik:RadDock runat="server" ID="RadDock1" Width="100%"
    25                                 <ContentTemplate> 
    26                                     Dock 4: Hello from zone 2 
    27                                 </ContentTemplate> 
    28                             </telerik:RadDock> 
    29                         </telerik:RadDockZone> 
    30                     </telerik:RadPane> 
    31                     <telerik:RadSplitBar ID="RadSplitBar2" runat="server" Width="20" Height="100%" /> 
    32                     <telerik:RadPane ID="RadPane4" runat="server" Scrolling="Y" Height="100%" Width="75%"
    33                         <telerik:RadDockZone ID="RadDockZone3" runat="server"
    34                             <telerik:RadDock runat="server" ID="RadDock2" Width="100%"
    35                                 <ContentTemplate> 
    36                                     Dock 5: Hello from zone 3 
    37                                 </ContentTemplate> 
    38                             </telerik:RadDock> 
    39                             <telerik:RadDock runat="server" ID="RadDock3" Width="100%"
    40                                 <ContentTemplate> 
    41                                     Dock 6: Hello from zone 3 
    42                                 </ContentTemplate> 
    43                             </telerik:RadDock> 
    44                         </telerik:RadDockZone> 
    45                     </telerik:RadPane> 
    46                 </telerik:RadSplitter> 
    47             </telerik:RadPane> 
    48         </telerik:RadSplitter> 
    49     </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.


  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 30 Apr 2008 Link to this post

    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
  3. adam
    adam avatar
    20 posts
    Member since:
    Dec 2007

    Posted 30 Apr 2008 Link to this post

    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.
  4. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 01 May 2008 Link to this post

    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
  5. George
    George avatar
    5 posts
    Member since:
    Jun 2008

    Posted 19 Jun 2008 Link to this post

    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.
  6. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 23 Jun 2008 Link to this post

    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
Back to Top