Adding Text to the RibbonBar

[Robin]

Hello,

is it possible to add text to the top right side of the RibbonBar (basically on the right side of the tabs)?

Thanks in advance,
Robin

[Boyan Dimitrov]

Hello Robin,

The RadRibbon tabs are wrapped in unordered list element (<ul>) that has class "rrbTabs". A possible solution would be to dynamically add a list item element ( <li>) to the <ul> element and float it to the right for example.

Please note that such functionality does not come of the box with the RadRibbonBar so we can not guarantee that this will work as expected in all scenarios and cases.

Regards,
Boyan Dimitrov
Telerik

 

 

[Robin]

Hello Boyan,

i have tried to implement your suggested solution, but I don't seem to be able to get it to work properly.
Could you provide sample-code?

Thanks in advance,
Robin

[Boyan Dimitrov]

Hello,

Please find below a sample solution that floats the "Custom tab" to the right.
//markup code

<telerik:RadRibbonBar ID="RadRibbonBar1" runat="server">
    <Tabs>
        <telerik:RibbonBarTab Text="Item 1"></telerik:RibbonBarTab>
        <telerik:RibbonBarTab Text="Item 2"></telerik:RibbonBarTab>
        <telerik:RibbonBarTab Text="Item 3"></telerik:RibbonBarTab>
        <telerik:RibbonBarTab Text="Item 4"></telerik:RibbonBarTab>
        <telerik:RibbonBarTab Text="Custom tab" CssClass="customClass"></telerik:RibbonBarTab>
    </Tabs>
</telerik:RadRibbonBar>

//css

<style type="text/css">
        .RadRibbonBar .rrbTab.customClass {
            float:right;
        }
    </style>

If you want to remove the border when the tab is hovered ( to look like a plain text instead of RadRibbonBar tab) you can apply the following style:
//css

.RadRibbonBar .rrbTab.customClass .rrbTabLabel {
                border-width:0px;
        }

Regards,
Boyan Dimitrov
Telerik

 

 

[Robin]

Hello Boyan,

thank you very much, that helped a lot. I cannot seem to get the border-width to work though, it doesnt seem to change the appearance.
Also, is there a way to disable the RibbonBarTab so that it cannot be clicked?

Thanks in advance,
Robin

[Boyan Dimitrov]

Hello Robin,

Please find below a code snippet:
//css

.RadRibbonBar .rrbTab.customClass {
    float: right;
}

    .RadRibbonBar .rrbTab.customClass .rrbTabLabel {
        border-width: 0px;
    }

html .RadRibbonBar .rrbTab.customClass .rrbTabLabel {
    cursor: default;
}


html .RadRibbonBar .customClass.rrbHoveredTab .rrbTabLabel,
html .RadRibbonBar .customClass.rrbSelectedTab .rrbTabLabel {
    background: transparent;
}

Also you can use the RadRibbonBar OnClientSelectedTabChanging and cancel the change.


Regards,
Boyan Dimitrov
Telerik