Hi there,
I'm trying to mimic the behavior of the Telerik Web Mail demo. I have a left pane that contains some navigation, and it splits horizontal with a rad panel bar at the bottom left. This all seems to be working except when I collapse the panel bar area. When I collapse this area, a vertical and horizontal bar appears. I have attached files showing the issue. I believe I have copied for the most part the web mail structure (with a few changes but nothing I can see that would make a difference).
I have attached images of the program, and supplied the html markup below.
<div style="height: 100vh; width: 100%; border: none;">
<telerik:RadSplitter runat="server" ID="MC2SplitterMain" Height="100%" Width="100%"
Skin="Windows7" Orientation="Horizontal" VisibleDuringInit="false" BorderStyle="None" BorderSize="0" PanesBorderSize="0" >
<telerik:RadPane ID="pnlTopFixed" runat="server" Width="100%" Height="77px" Scrolling="None">
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand"><asp:HyperLink runat="server" CssClass="MC2WhiteHyper TextLogo" ID="lnkCFConnect" Text="Cforia.<i>connect</i>" NavigateUrl="https://cforiasoftware.zendesk.com/" Target="_blank"></asp:HyperLink></div>
</div>
<div>
<div class="nav navbar-nav navbar-right">
<div class="col tm5">
<telerik:RadSearchBox runat="server" ID="MC2GlobalSearch" ClientIDMode="Predictable"
Skin="Windows7"
Width="100%" DropDownSettings-Height="300"
EmptyMessage="Search"
Filter="StartsWith"
MaxResultCount="20">
</telerik:RadSearchBox>
</div>
<div class="col tm5" style="margin-right: 100px;"> </div>
<!-- <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> -->
</div>
</div>
</div>
</nav>
<div class="menu" style="zoom: 1;">
<telerik:RadMenu runat="Server" ID="RadMenu1" EnableOverlay="true" Skin="Windows7" EnableShadows="true" EnableRoundedCorners="true" Width="100%">
<Items>
<telerik:RadMenuItem runat="server" Text="Actions">
<Items>
<telerik:RadMenuItem Text="New Activity" />
<telerik:RadMenuItem Text="New Note" />
<telerik:RadMenuItem Text="New Contact" />
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="View">
<Items>
<telerik:RadMenuItem Text="Activities" />
<telerik:RadMenuItem Text="Customers">
<Items>
<telerik:RadMenuItem Text="Query Template 1"></telerik:RadMenuItem>
<telerik:RadMenuItem Text="Query Template 2"></telerik:RadMenuItem>
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem Text="Parents" />
<telerik:RadMenuItem Text="Headquarters" />
<telerik:RadMenuItem Text="Transactions" />
<telerik:RadMenuItem Text="Deductions" />
<telerik:RadMenuItem Text="Open Orders" />
<telerik:RadMenuItem Text="Contacts" />
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem Text="Help">
<Items>
<telerik:RadMenuItem Text="Cforia Connect"
NavigateUrl="https://cforiasoftware.zendesk.com/" Target="_blank" />
</Items>
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
</div>
</telerik:RadPane>
<telerik:RadPane ID="pnlBottomFixed" runat="server" Width="100%">
<telerik:RadSplitter ID="MC2Splitter" runat="server" ClientIDMode="Predictable" Height="100%" Width="100%" Skin="Windows7">
<telerik:RadPane ID="navigationPane" runat="server" Width="250" MaxWidth="400" MinWidth="150" >
<telerik:RadSplitter runat="server" ID="MC2SplitterLeft" BorderStyle="None" PanesBorderSize="0" Orientation="Horizontal" Height="100%" >
<telerik:RadPane runat="server" ID="topLeftPane">
<div class="lm5 rm5 tm5 bm5">
<label class="control-label boldimp rm5" for="cmbAgent"><asp:Label runat="server" ID="lblAgent" Text="Agent:"></asp:Label></label>
<telerik:RadComboBox runat="server" ID="cmbAgent" CssClass="cmbSearchCombo" MarkFirstMatch="true" DataTextField="Display" DataValueField="Value" MaxHeight="200px" HighlightTemplatedItems="true" DropDownWidth="450px" ClientIDMode="Predictable" Width="125px" >
<HeaderTemplate>
<ul>
<li class="CMB_colChk"> </li>
<li class="CMB_col1">Agent ID</li>
<li class="CMB_col2">Name</li>
</ul>
</HeaderTemplate>
<ItemTemplate>
<div id="divAgentValues" onclick="StopPropagation(event)" class="combo-item-template">
<ul>
<li class="CMB_colChk"><input type="checkbox" class="chkAgent" index='<%# DataBinder.Eval(Container.DataItem, "Index") %>' desc='<%# DataBinder.Eval(Container.DataItem, "Col2") %>' value='<%# DataBinder.Eval(Container.DataItem, "Col1") %>'></li>
<li class="CMB_col1 clsAgentValue" value='<%# DataBinder.Eval(Container.DataItem, "Col1") %>' >
<%# DataBinder.Eval(Container.DataItem, "Col1") %></li>
<li class="CMB_col2 clsAgentValue" value='<%# DataBinder.Eval(Container.DataItem, "Col1") %>'>
<%# DataBinder.Eval(Container.DataItem, "Col2")%></li>
</ul>
</div>
</ItemTemplate>
</telerik:RadComboBox>
</div>
<div>
<telerik:RadTreeView ID="tvNavigation" runat="server" Skin="Windows7" Height="100%" ClientIDMode="Predictable"></telerik:RadTreeView>
</div>
</telerik:RadPane>
<telerik:RadSplitBar runat="server" ID="MC2LeftSplitBar" CollapseMode="Backward" EnableResize="false" />
<telerik:RadPane runat="server" ID="bottomLeftPane" ClientIDMode="Predictable" BorderStyle="None" Height="236" MaxHeight="236">
<telerik:RadPanelBar runat="server" ID="MC2PanelNavigation" Height="100%" Width="100%" Skin="Windows7" ClientIDMode="Predictable">
<Items>
<telerik:RadPanelItem Text="Home" Value="" Expanded="false"></telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward"></telerik:RadSplitBar>
<telerik:RadPane ID="MC2ContentPane" runat="server" Scrolling="Y" ContentUrl="~/Controls/frmMainV2.aspx?ID=37">
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
</div>​