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

Split Bar button jumps position on hover

2 Answers 95 Views

Splitter

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

Gene asked on 04 May 2009, 09:31 PM

Hello,

I am having an issue with some nested splitters, a tabstrip, and splitbar. Basically, here is my layout:

I have a RadTabStrip connected to a MultiPageView, which is inside of a splitter. Inside that splitter on one of the sub-pages is another splitter. The nested splitter is not visible when the page loads, and when you go to the page (i.e., make it visible by clicking its tab), the splitter resizes to fit its parent pane, but the splitbar in the middle of the nested splitter has a button for collapsing that is all the way at the right of the pane. When you move your mouse over the button, it "jumps" to the middle of the pane. This only happens after initial load, then it's fine after that. I believe this probably has to do with the fact that the splitter is not visible initially, but I don't know how to fix it. Here is my relevant code:

    
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head id="Head1" runat="server"> 
        
                <title></title> 
        
                <link rel="Stylesheet" href="styles/layout.css" type="text/css" /> 
        
                <link rel="Stylesheet" href="styles/branding.css" type="text/css" /> 
        
                <link rel="Stylesheet" href="styles/forms.css" type="text/css" /> 
        
                <link rel="stylesheet" href="styles/RedCurved/TabStrip.RedCurved.css" type="text/css" /> 
        
                <!--[if lte IE 7]> 
        
                    <link rel="Stylesheet" href="styles/ie.css" type="text/css" /> 
        
                <![endif]--> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                <%-- ... --%> 
        
                </telerik:RadScriptManager> 
        
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px"> 
        
                    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
        
                          style="border: 0px;" /> 
        
                </telerik:RadAjaxLoadingPanel> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                <div id="top"> 
        
                    <div id="header"> 
        
                        <asp:Image ID="imgBanner" runat="server" ImageUrl="images/banner_0508.jpg" /> 
        
                    </div> 
        
                     <telerik:RadTabStrip ID="_manageRefTabCtl"  
        
                                      runat="server"  
        
                                      MultiPageID="RadMultiPage1"  
        
                                      SelectedIndex="3"  
        
                                      EnableEmbeddedSkins="false"  
        
                                      Skin="RedCurved"  
        
                                      Width="600" 
        
                                      Style="float: right;"> 
        
                    <Tabs> 
        
                        <telerik:RadTab runat="server" Text="My Work" PageViewID="RadPageView1"> 
        
                        </telerik:RadTab> 
        
                        <telerik:RadTab runat="server" Text="Manage Work" PageViewID="RadPageView2"> 
        
                        </telerik:RadTab> 
        
                        <telerik:RadTab runat="server" Text="E-mail" PageViewID="RadPageView3"> 
        
                        </telerik:RadTab> 
        
                        <telerik:RadTab runat="server" Text="Search" PageViewID="RadPageView4" Selected="true"> 
        
                        </telerik:RadTab> 
        
                        <telerik:RadTab runat="server" Text="Address Book" PageViewID="RadPageView5"> 
        
                        </telerik:RadTab> 
        
                        <telerik:RadTab runat="server" Text="Reports" PageViewID="RadPageView6"> 
        
                        </telerik:RadTab> 
        
                    </Tabs> 
        
                    </telerik:RadTabStrip> 
        
                    <h1 id="pageHeader">VZ Leads</h1> 
        
                </div> 
        
                    <telerik:RadSplitter ID="_outerSplitter" runat="server" VisibleDuringInit="false" Width="100%" Height="100%" HeightOffset="150" Skin="Office2007"> 
        
                    <telerik:RadPane ID="_leftPane" runat="server" Scrolling="None" MinWidth="400"> 
        
                    <telerik:RadAjaxPanel ID="UpdatePanel1" runat="server">     
        
                                <telerik:RadMultiPage ID="RadMultiPage1" Runat="server"> 
        
                                <telerik:RadPageView ID="RadPageView1" runat="server"> 
        
                                    <uc:MyWork id="_myWorkCtl" runat="server" /> 
        
                                </telerik:RadPageView> 
        
                                <telerik:RadPageView  ID="RadPageView2" runat="server"> 
        
                                    <uc:ManageWork ID="_manageWorkCtl" runat="server" /> 
        
                                </telerik:RadPageView> 
        
                                <telerik:RadPageView ID="RadPageView3" runat="server"> 
        
                                </telerik:RadPageView> 
        
                                <telerik:RadPageView ID="RadPageView4" runat="server"> 
        
                                    <uc:SearchReferral ID="_searchReferralCtl" runat="server"></uc:SearchReferral> 
        
                                </telerik:RadPageView> 
        
                                <telerik:RadPageView ID="RadPageView5" runat="server"> 
        
                                </telerik:RadPageView> 
        
                                <telerik:RadPageView ID="RadPageView6" runat="server"> 
        
                                </telerik:RadPageView> 
        
                            </telerik:RadMultiPage> 
        
                         </telerik:RadAjaxPanel> 
        
                    </telerik:RadPane> 
        
                    <%--<telerik:RadSplitBar ID="_splitBar" CollapseMode="Backward" runat="server" />--%> 
        
                    <telerik:RadSplitBar ID="_splitBar" runat="server" /> 
        
                    <telerik:RadPane ID="_rightPane" runat="server" Scrolling="Y" Width="22px" MinWidth="200"> 
        
                        <telerik:RadSlidingZone runat="server" Width="22px" SlideDirection="Left"> 
        
                        <telerik:RadSlidingPane ID="_msgCenterSlidingPane" runat="server" Title="Message Center" Width="250px"> 
        
                        <uc:MessageCenter ID="_messageCenterCtl" runat="server" /> 
        
                        </telerik:RadSlidingPane> 
        
                        </telerik:RadSlidingZone> 
        
                    </telerik:RadPane> 
        
                     </telerik:RadSplitter> 
        
            </form> 
        
            </body> 
        
            </html>

That is the outer splitter. The code for the relevant control, uc:SearchReferral, is this:

    
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <h2 class="redGrad">Search Referrals</h2>  
        
            <telerik:RadSplitter ID="_searchRefSplitter"  
        
                                 runat="server"  
        
                                 Width="100%"  
        
                                 Height="100%" 
        
                                 HeightOffset="30"  
        
                                 Orientation="Horizontal" 
        
                                 ResizeWithParentPane="false" 
        
                                 Skin="Office2007"> 
        
              <telerik:RadPane ID="_searchFormPane" runat="server" Width="100%" Height="60%"> 
        
                        <div class="form"> 
        
                            <fieldset> 
        
                                <p> 
        
                                Enter search criteria for one or more of the elements below and click on <b>Search</b>. 
        
                                </p>  
        
                                <ol> 
        
                                    <li> 
        
                                        <telerik:RadTextBox ID="RefNumRadTextBox" runat="server"  
        
                                            MaxLength="20"  
        
                                            Label="Referral Number: " 
        
                                            Skin="Office2007" 
        
                                            SelectionOnFocus="SelectAll" 
        
                                            Width="300px"></telerik:RadTextBox> 
        
                                    </li> 
        
                                    <li> 
        
                                         <telerik:RadTextBox ID="CustnameRadTextBox" runat="server"  
        
                                            MaxLength="50"  
        
                                            Label="Customer Name*: " 
        
                                            Skin="Office2007" 
        
                                            SelectionOnFocus="SelectAll" 
        
                                            Width="350px"></telerik:RadTextBox> 
        
                                            &nbsp;<font color="red"><i>*Begins with</i></font> 
        
                                    </li> 
        
                                    <li> 
        
                                        <telerik:RadTextBox ID="CustNumRadTextBox" runat="server"  
        
                                            MaxLength="15"  
        
                                            Label="Customer Number: " 
        
                                            Skin="Office2007" 
        
                                            SelectionOnFocus="SelectAll" 
        
                                            Width="350px"></telerik:RadTextBox> 
        
                                    </li> 
        
                                    <li> 
        
                                         <telerik:RadTextBox ID="PublicIDRadTextBox" runat="server" 
        
                                            Label="Participant Employee ID: " 
        
                                            Skin="Office2007"  
        
                                            SelectionOnFocus="SelectAll" 
        
                                            Width="350px"></telerik:RadTextBox> 
        
                                    </li> 
        
                                    <li> 
        
                                        <telerik:RadTextBox ID="PartLastNmRadTextBox" runat="server"  
        
                                            MaxLength="50"  
        
                                            Label="Participant Last Name: " 
        
                                            Skin="Office2007" 
        
                                            SelectionOnFocus="SelectAll" 
        
                                            Width="350px"></telerik:RadTextBox> 
        
                                            &nbsp;<font color="red"><i>*Begins with</i></font> 
        
                                    </li> 
        
                                    <li> 
        
                                        <telerik:RadTextBox ID="ServiceOrdNumRadTextBox" runat="server"  
        
                                            MaxLength="20"  
        
                                            Label="Service Order Number: " 
        
                                            Skin="Office2007" 
        
                                            SelectionOnFocus="SelectAll" 
        
                                            Width="300px"></telerik:RadTextBox> 
        
                                    </li> 
        
                                    <li> 
        
                                        <telerik:RadToolBar ID="_searchReferralToolBar" runat="server"  
        
                                        Skin="Office2007" OnButtonClick="OnClickSearchToolBar" OnClientButtonClicking="onButtonClicking"> 
        
                                            <Items> 
        
                                                <telerik:RadToolBarButton runat="server" Text="Search" Font-Bold="true" ToolTip="Search Referral" Value="0"> 
        
                                                </telerik:RadToolBarButton> 
        
                                                <telerik:RadToolBarButton runat="server" IsSeparator="True" PostBack="False"  
        
                                                    Text="Seperator"> 
        
                                                </telerik:RadToolBarButton> 
        
                                                <telerik:RadToolBarButton runat="server" Text="Reset" Font-Bold="true" Value="1"> 
        
                                                </telerik:RadToolBarButton> 
        
                                            </Items> 
        
                                        </telerik:RadToolBar> 
        
                                    </li> 
        
                                    <li> 
        
                                        <asp:Label ID="lblMessage" runat="server" Text="" Font-Bold="true" ForeColor="Red"></asp:Label> 
        
                                    </li> 
        
                                </ol> 
        
                            </fieldset>  
        
                            </div> 
        
            </telerik:RadPane>       
        
            <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Forward" /> 
        
            <telerik:RadPane ID="_searchResultsPane" runat="server" Width="100%" Height="40%"> 
        
                         <h2 class="redGrad">Search Results</h2> 
        
                <telerik:RadGrid ID="_searchResultsRadGrid"  
        
                                runat="server"  
        
                                AutoGenerateColumns="False"  
        
                                GridLines="Both" HorizontalAlign="Left"  
        
                                Skin="Office2007" Height="90%"  
        
                                AllowSorting="True"  
        
                                AllowPaging="true"                                          
        
                                PageSize="10" > 
        
                    <PagerStyle NextPageText="&amp;gt;" PrevPageText="&amp;lt;" Mode="NextPrevAndNumeric"></PagerStyle> 
        
                    <MasterTableView CellSpacing = "-1"  
        
                                    AutoGenerateColumns="False"  
        
                                    EnableNoRecordsTemplate="true"  
        
                                    CommandItemDisplay="None" > 
        
                        <Columns> 
        
                            <telerik:GridHyperLinkColumn  
        
                                HeaderText="RefNum"  
        
                                DataTextField="RefNum"       
        
                                UniqueName="RefNum"     
        
                                DataNavigateUrlFormatString="~\ManageReferrals.aspx?RefNum={0}"     
        
                                DataNavigateUrlFields="RefNum"     
        
                                Target="_target" SortExpression="RefNum">  
        
                                 <HeaderStyle Width="10%" Wrap="false" />    
        
                            </telerik:GridHyperLinkColumn>   
        
                            <telerik:GridBoundColumn HeaderText="Date" UniqueName="OpenDt"   
        
                                DataField="OpenDt" DataFormatString="{0:MM/dd/yyyy}"> 
        
                                <HeaderStyle Width="10%" Wrap="false" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn HeaderText="Customer Name" UniqueName="CustNm" 
        
                                 DataField="CustNm"> 
        
                                 <HeaderStyle Width="20%" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn HeaderText="Customer Phone" UniqueName="CustPhone" 
        
                                 DataField="CustPhone"> 
        
                                 <HeaderStyle Width="15%" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn HeaderText="Participant Last Name" UniqueName="ParticipantLastName" 
        
                                 DataField="ReferralPerson.Srch_LastNm"> 
        
                                 <HeaderStyle Width="20%" /> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn HeaderText="Status" UniqueName="Status" 
        
                                 DataField="Status"> 
        
                                 <HeaderStyle Width="15%" /> 
        
                            </telerik:GridBoundColumn> 
        
                        </Columns> 
        
                        <NoRecordsTemplate>No records to display.</NoRecordsTemplate> 
        
                    </MasterTableView> 
        
                    <ClientSettings> 
        
                        <DataBinding FilterParameterType="String"></DataBinding> 
        
                        <Scrolling AllowScroll="True" ScrollHeight="200px" UseStaticHeaders="True" /> 
        
                        <Resizing AllowColumnResize="True" ClipCellContentOnResize="True" ResizeGridOnColumnResize="False" /> 
        
                    </ClientSettings> 
        
                </telerik:RadGrid>  
        
                </telerik:RadPane>  
        
            </telerik:RadSplitter>

Here are some screenshots:

Initial page load
After mousing over the button

2 Answers, 1 is accepted

Accepted

answered on 08 May 2009, 10:38 AM

splitbarpb.zip

Hi Gene,

I built up a test demo based on your code and I was able to reproduce the problem. In order to fix it, please insert the following style on your page:

.rspCollapseBarHorizontalCollapse
{
float: none !important;
}

For your convenience I attached my test demo.

Have a great weekend,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Split Bar button jumps position on hover

2 Answers, 1 is accepted