Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

use CSS to hide the tab area

11 Answers 194 Views
RibbonBar
This is a migrated thread and some comments may be shown as answers.
Fred Taylor
Top achievements
Rank 1
Fred Taylor asked on 19 Sep 2011, 04:49 PM
before.jpg
after.jpg
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.

11 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 21 Sep 2011, 11:45 AM
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.
0
Fred Taylor
Top achievements
Rank 1
answered on 21 Sep 2011, 01:44 PM
It did not have any impact.  Tested against IE8 and FF6. 
0
Kate
Telerik team
answered on 22 Sep 2011, 11:05 AM
image1.png
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
0
Fred Taylor
Top achievements
Rank 1
answered on 22 Sep 2011, 01:29 PM
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.
0
Colin
Top achievements
Rank 1
answered on 22 Sep 2011, 03:41 PM
RibbonBarTabArea.jpg
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>
0
Dimitar Terziev
Telerik team
answered on 27 Sep 2011, 04:28 PM
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
0
Colin
Top achievements
Rank 1
answered on 27 Sep 2011, 04:41 PM
Yes, that works.  Thank you.

Colin
0
Fred Taylor
Top achievements
Rank 1
answered on 27 Sep 2011, 04:41 PM
That worked!
0
Josh
Top achievements
Rank 1
answered on 24 Jan 2012, 03:21 PM
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.
0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
answered on 02 Sep 2020, 10:38 PM

This works best as far as I can tell:

.RadRibbonBar .rrbTabs { display:none !important; }

0
Vessy
Telerik team
answered on 03 Sep 2020, 06:48 AM

Hi,

Thanks a lot for sharing your solution with the community, Albert!

I am sure it will be useful for the other people facing the same issue.

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
RibbonBar
Asked by
Fred Taylor
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Fred Taylor
Top achievements
Rank 1
Kate
Telerik team
Colin
Top achievements
Rank 1
Dimitar Terziev
Telerik team
Josh
Top achievements
Rank 1
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
Vessy
Telerik team
Share this question
or