Cross browser style issues with Tab text

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

    Posted 18 Apr 2013 Link to this post


    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?



    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" >
                <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;">
                                            <telerik:RadToolBarButton Value="Filter" Text="Apply" ImageUrl="/Images/Icons/16/search.png" CausesValidation="False" />
  2. Answer
    Vessy avatar
    1351 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:
        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. DevCraft R3 2016 release webinar banner
  4. Jon
    Jon avatar
    811 posts
    Member since:
    Oct 2008

    Posted 23 Apr 2013 Link to this post

    Ah. Many thanks Veselina!

    Works perfectly now.

    Best Regards

Back to Top