Splitter Height Behavior

[Fred]

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.

[Shinu]

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.

[Fred]

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.