Split Bar button jumps position on hover

3 posts, 1 answers
  1. Gene
    Gene avatar
    16 posts
    Member since:
    Jun 2012

    Posted 04 May 2009 Link to this post

    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. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 08 May 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gene
    Gene avatar
    16 posts
    Member since:
    Jun 2012

    Posted 12 May 2009 Link to this post

    Thank you for your reply.  We actually decided to do something different, but I will definitely keep this solution in mind for future reference!
Back to Top