5 Answers, 1 is accepted
0
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
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
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
Hello,
Please find below a sample solution that floats the "Custom tab" to the right.
//markup code
//css
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
Regards,
Boyan Dimitrov
Telerik
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
>
<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
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
Hello Robin,
Please find below a code snippet:
//css
Also you can use the RadRibbonBar OnClientSelectedTabChanging and cancel the change.
Regards,
Boyan Dimitrov
Telerik
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.