This is a migrated thread and some comments may be shown as answers.

Adding Text to the RibbonBar

5 Answers 59 Views
RibbonBar
This is a migrated thread and some comments may be shown as answers.
Robin
Top achievements
Rank 1
Robin asked on 05 Nov 2014, 11:46 AM
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

5 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 10 Nov 2014, 07:44 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Robin
Top achievements
Rank 1
answered on 19 Nov 2014, 02:24 PM
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
0
Boyan Dimitrov
Telerik team
answered on 24 Nov 2014, 11:44 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Robin
Top achievements
Rank 1
answered on 26 Nov 2014, 01:58 PM
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
0
Boyan Dimitrov
Telerik team
answered on 01 Dec 2014, 12:40 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
RibbonBar
Asked by
Robin
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Robin
Top achievements
Rank 1
Share this question
or