Centering Tabs in Rich Content Editor

DTrishman
Tera Contributor

‎08-26-2024 03:52 PM

Good evening,

 

I'm looking for some guidance on centering tabs in the Rich Content Editor. The topic page I'm building has 5 tabs. With each set to 20% width, the last tab is forced down into a second row. Somehow 5 x 20% doesn't equal 100.

2024-08-26 18_43_42-.png

 

 

In addition to that, I get some weird behavior where the tabs shift all over the widget as you select different tabs.

2024-08-26 18_46_05-Wellness - Employee Center.png2024-08-26 18_46_40-Wellness - Employee Center.png

 

 

I've seen this accomplished on several demo pages for topic microsites but unsure how to achieve it with the settings in the editor.

2024-08-26 18_40_30-Employee Center Academy_ Dynamic Topic Microsites and Rich Content Editor - YouT.png

 

 

 

 

Any help would be greatly appreciated!

0 Helpfuls
  • 714 Views
6 REPLIES 6

SMiller7
Giga Expert
In response to Pooja_Patil

‎01-24-2025 09:42 AM

@Pooja_Patil - thanks for responding. Here's an example of tabbed content.

InterpreterTabs.png

0 Helpfuls

Pooja_Patil
ServiceNow Employee
ServiceNow Employee
In response to SMiller7

‎01-24-2025 10:22 AM

@SMiller7 , this is from OOB portal theme CSS. Are you expecting it to have borders around the tabs panel & tab content? 

Currently tab component doesn't have ability to set borders from settings. This is on the roadmap, please keep an eye out for upcoming releases.

 

There are two ways you can achieve what you are looking for - 

1. add desired CSS to widget instance to overwrite "tab" theme stylings from portal, although caveat is it might interfere with styles you apply in rich content editor on individual content. 

2. edit the source code, for more info refer https://www.servicenow.com/docs/bundle/xanadu-employee-service-management/page/product/employee-cent... this keeps your changes contained within each content