Issue with Splitter and scroll bar

3 posts, 0 answers
  1. Dennis
    Dennis avatar
    6 posts
    Member since:
    Oct 2014

    Posted 10 Sep 2015 Link to this post

    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;">&nbsp;</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">&nbsp;</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>​

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 11 Sep 2015 Link to this post

    Hi Dennis,

    The easiest fix is to disable scrolling for the element that gets scrollbars. In this case, the Pane that holds the innermost splitter:

    <telerik:RadPane ID="navigationPane" runat="server" Width="250" MaxWidth="400" MinWidth="150" Scrolling="None">

    This will let the content in the inner panes (where the treeview and panelbar are) create overflow in their own panes if needed.

    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dennis
    Dennis avatar
    6 posts
    Member since:
    Oct 2014

    Posted 11 Sep 2015 in reply to Marin Bratanov Link to this post

    That worked perfect.  Thank you.
Back to Top