use CSS to hide the tab area

10 posts, 0 answers
  1. Fred Taylor
    Fred Taylor avatar
    14 posts
    Member since:
    Sep 2008

    Posted 19 Sep 2011 Link to this post

    I want to hide the tab area ussing css.  After upgrading to the new controls the tab area now displays at full height with no text.  Before is was only a few pixels high with no tab text.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 21 Sep 2011 Link to this post

    Hello Fred,

    Try the following CSS to hide the tab area.
    CSS:
    <style type="text/css">
        .RadRibbonBar .rrbTabStrip .rtsLevel1
        {
            height:0px !important;
        }
    </style>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Fred Taylor
    Fred Taylor avatar
    14 posts
    Member since:
    Sep 2008

    Posted 21 Sep 2011 Link to this post

    It did not have any impact.  Tested against IE8 and FF6. 
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 22 Sep 2011 Link to this post

    Hello Fred,

    I tested your scenario bu I am not able to get the appearance that you do neither in FF6 not in IE8. I have attached an image of how my RadRibbonBar looks like in the above mentioned browsers and using 2011.2.712.35 version of Telerik controls. Is there something specific that I am missing in the code?
    <telerik:RadRibbonBar ID="RibbonBar1"  runat="server" >
            <telerik:RibbonBarTab >
                    <telerik:RibbonBarGroup Text="group1">
                        <Items>
                            <telerik:RibbonBarButton  Size="Medium" Text="button1" />
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
            </telerik:RadRibbonBar>

    Kind regards,
    Kate
    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
  6. Fred Taylor
    Fred Taylor avatar
    14 posts
    Member since:
    Sep 2008

    Posted 22 Sep 2011 Link to this post

    The pic you attached is the appearance I used to have before I upgraded to 2011.2.915.35.  After the upgrade the tab shows full height event without the text attribute set.
  7. Colin
    Colin avatar
    3 posts
    Member since:
    Aug 2007

    Posted 22 Sep 2011 Link to this post

    I have the same issue with 2011.2.915.40.  I created a new "RadControls Web Site" and used the same RibbonBar as Kate.  The tab area is still shown in both IE8 and FF 6.0.2.

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager runat="server"></asp:ScriptManager>
        <div>
        <telerik:RadRibbonBar ID="RibbonBar1"  runat="server" >
            <telerik:RibbonBarTab >
                    <telerik:RibbonBarGroup Text="group1">
                        <Items>
                            <telerik:RibbonBarButton  Size="Medium" Text="button1" />
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
            </telerik:RadRibbonBar>
        </div>
        </form>
    </body>
    </html>
  8. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 27 Sep 2011 Link to this post

    Hello Colin,

    Please try the following CSS in order to remove the Tab area:
    .RadRibbonBar .rrbTabs
            {
                height: 0px !important;
            }

    I'm using the 2011.2.915.35 version of the controls.

    All the best,
    Dimitar Terziev
    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
  9. Colin
    Colin avatar
    3 posts
    Member since:
    Aug 2007

    Posted 27 Sep 2011 Link to this post

    Yes, that works.  Thank you.

    Colin
  10. Fred Taylor
    Fred Taylor avatar
    14 posts
    Member since:
    Sep 2008

    Posted 27 Sep 2011 Link to this post

    That worked!
  11. Josh
    Josh avatar
    61 posts
    Member since:
    Dec 2009

    Posted 24 Jan 2012 Link to this post

    As of Q3 2011 SP1 this fix is no longer working. I was able to get it to work with the following CSS:

    .RadRibbonBar .rrbTabs
    {
        height: 0px !important;
    }
    .RadRibbonBar
    {
        height: 99px !important;
    }

    The rrbTabs class is the same but I had to add the .RadRibbonBar one. Just thought I would post this in case anyone wants to hide the tab area.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017