This is a migrated thread and some comments may be shown as answers.

Issue with Splitter and scroll bar

2 Answers 27 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Dennis
Top achievements
Rank 1
Dennis asked on 10 Sep 2015, 06:20 PM

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 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 11 Sep 2015, 08:17 AM

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
0
Dennis
Top achievements
Rank 1
answered on 11 Sep 2015, 06:31 PM
That worked perfect.  Thank you.
Tags
Splitter
Asked by
Dennis
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Dennis
Top achievements
Rank 1
Share this question
or