Splitter Height Behavior

3 posts, 0 answers
  1. Derek
    Derek avatar
    4 posts
    Member since:
    Sep 2011

    Posted 07 Apr 2014 Link to this post

    I have the following simple splitter setup.  The expected result would be the left pane to be at least 2000px tall....  when it renders, the pane's style shows "Height:1px;", and the browser displays it 1px tall.

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
              <telerik:RadSplitter ID="RadSplitter1" runat="server" PanesBorderSize="0" Skin="Silk" BorderSize="0" Height="100%" Width="100%" LiveResize="False" RenderMode="Auto">
                  <telerik:RadPane ID="RadPane2" runat="server" Width="180px" MaxWidth="180" MinWidth="180" Scrolling="None" BorderWidth="0" BackColor="#DFDFDF" MinHeight="2000" Height="2000">
                      <h1>Testing Panel Height</h1>
                  </telerik:RadPane>
                  <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" EnableResize="False" BackColor="#336699" Height="100%"></telerik:RadSplitBar>
                  <telerik:RadPane ID="RadPane1" runat="server" Locked="False"  MinHeight="500" Height="100%">
                      <h1>Middle Pane</h1>
                  </telerik:RadPane>
              </telerik:RadSplitter>

    The results:

    ...
            <td id="RadPane2" class="rspPane rspFirstItem" style="border-right-width:0px;border-bottom-width:0px;"><div id="RAD_SPLITTER_PANE_CONTENT_RadPane2" style="width: 180px; height: 1px; overflow: hidden; background-color: rgb(223, 223, 223);">
                        <h1>Testing Panel Height</h1>
                    ...
                

    Thanks for the support.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Apr 2014 in reply to Derek Link to this post

    Hi Derek, 

    Please do the following modifications in your ASPX code and as a suggestion try to set the height from JavaScript.

    ASPX:
    <telerik:RadSplitter ID="RadSplitter1" runat="server" PanesBorderSize="0" Skin="Silk"
        BorderSize="0" Width="100%" LiveResize="False">
        <telerik:RadPane ID="RadPane2" runat="server" Width="180px" MaxWidth="180" MinWidth="180"
            Scrolling="None" BorderWidth="0" BackColor="#DFDFDF" MinHeight="2000">
            <h1>
                Testing Panel Height</h1>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" EnableResize="False" BackColor="#336699" Height="100%">
        </telerik:RadSplitBar>
        <telerik:RadPane ID="RadPane1" runat="server" Locked="False" MinHeight="500" Height="100%">
            <h1>
                Middle Pane</h1>
        </telerik:RadPane>
    </telerik:RadSplitter>

    JavaScript:
    <script type="text/javascript">
        function pageLoad() {
            var splitter = $find("<%=RadSplitter1.ClientID %>");
            var pane = splitter.GetPaneById("RadPane2");
            pane.set_height(2000);
        }
    </script>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Derek
    Derek avatar
    4 posts
    Member since:
    Sep 2011

    Posted 08 Apr 2014 in reply to Shinu Link to this post

    Thanks for the work around Shinu.  I would make the suggestion, that despite the orientation of the splitter, the panels should honor the min-height and min-width.  In this case, a vertical splitter, should limit the width when the splitter is resized, but honor the min-height property using css as well.  

    Thanks again.
Back to Top