Cross browser style issues with Tab text

3 posts, 1 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 18 Apr 2013 Link to this post

    Hi,

    I use a RadSplitter to show some filter options for my pages,  The Filter options button when hovered shows the filter pane.  All great.  I have an issue with the button though.  On Chrome the text is more of less in the vertical middle,  on IE (someone please scrap IE) it goes to the top.  See the attached image, IE on the left, Chrome on the right.  I've looked at the CSS and found the rspPaneTabText style, having applied a "vertical-align:middle ! important;" style to it I still don't get anywhere.

    Any suggestions?

    Regards

    Jon

    Code for my splitter is below: 

    <telerik:RadSplitter ID="uxRadSplitter" runat="server" Width="788" Height="543" Orientation="Horizontal" VisibleDuringInit="false" BorderSize="0"  >
                <telerik:RadPane ID="uxRadPaneTop" runat="server" >
                    Sample
                </telerik:RadPane>
                <telerik:RadPane ID="uxRadPaneBottom" runat="server" Height="25px" Scrolling="none" CssClass="SlidingPaneFilterTitle" >
                    <telerik:RadSlidingZone ID="uxRadSlidingZone" runat="server" Height="25px" SlideDirection="Top">
                        <telerik:RadSlidingPane ID="uxRadSlidingPaneFilter" Title="Filter Options" runat="server" Height="175px"
                        EnableDock="false" EnableResize="false" IconUrl="/Images/Icons/16/search.png">
     
                                    <telerik:RadToolBar ID="uxRadToolBar" runat="server" OnClientButtonClicking="clientButtonClicking" style="margin-top:5px;">
                                        <items>
                                            <telerik:RadToolBarButton Value="Filter" Text="Apply" ImageUrl="/Images/Icons/16/search.png" CausesValidation="False" />
                                        </items>
                                    </telerik:RadToolBar>
                        </telerik:RadSlidingPane>
                     </telerik:RadSlidingZone>
                </telerik:RadPane>
            </telerik:RadSplitter>
  2. Answer
    Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 22 Apr 2013 Link to this post

    Hi Jon,

    You could workaround the described behavior by setting the line-height style to all elements with class="rspPaneTabText". The height should be equal to the height of the SlidingZone:
    .rspPaneTabText
    {
        line-height: 25px !important;
    }

    I hope this helps.

    Kind regards,
    Veselina Raykova
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 23 Apr 2013 Link to this post

    Ah. Many thanks Veselina!

    Works perfectly now.

    Best Regards

    Jon
Back to Top