cancel
Showing results for 
Search instead for 
Did you mean: 

Tabber Formatting

rahuldhomane
10 - ETL
10 - ETL

Can we format [Font, Size, Alignment, Border, Text color] of the Tabber headers? Also, can we set default selection for one of the tabber options?

 

Thanks,

Rahul

1 ACCEPTED SOLUTION

Were you able to find a way to format the Tabber?

View solution in original post

9 REPLIES 9

Chandra
8 - Cloud Apps
8 - Cloud Apps

Hi Rahul,

Try this once..

widget.on('render',function(w, e) {
e.prefixText = ''; e.suffixText = '';
e.selectedColor = '#86b817'; /*The color of the chosen title*/
e.fontColor = '#cccccc'; /*The color of the unchosen titles*/ e.elementWidth = '103%'; e.descColor = '#a5a5a5'; e.parentMarginLeft = '-15px'; e.height = 32; /* affects the tabber widget default high*/ });
widget.tabs = [
{
title: "Column Chart",
displayWidgetIds : ["55797a9459ef031011000032"],
hideWidgetIds : ["557d408a4630ccdc11000019"]
},
{
title: "Table",
displayWidgetIds : ["557d408a4630ccdc11000019"],
hideWidgetIds : ["55797a9459ef031011000032"]
}
];

 

Hi @Chandra ,

I have tried this script but haven't found the exact way to reduce the font size of the tabber text. Please let me know if I am missing anything here.

Thanks.

Were you able to find a way to format the Tabber?

@DashboardLover @rahuldhomane 

Please try below script:

harikm007_0-1647974980864.png

widget.on('ready',function(w, e) {
	
	basicstyle = {'border-radius':'10px', 'padding-left':'10px', 'padding-right':'10px'} //style for both active and inactive tabs
	activeTabSyle = {'border': '3px green solid', 'font-size':'20px'} //style for active tab
	inactiveTabStyle = {'border' : '3px grey solid', 'font-size':'15px'} //style for inactive tab
	
	$('.listDefaultCSS .listItemDefaultCSS', element).css(basicstyle) 

	$(`.listDefaultCSS .listItemDefaultCSS[index=${w.style.activeTab}]`, element).css(activeTabSyle) 
    $(`.listDefaultCSS .listItemDefaultCSS:not([index=${w.style.activeTab}])`, element).css(inactiveTabStyle)
	
	$('.listDefaultCSS .listItemDefaultCSS').on('click', function(s){
    	$(`.listDefaultCSS .listItemDefaultCSS:contains("${$(s)[0].currentTarget.innerHTML}")`, element).css(activeTabSyle)
    	$(`.listDefaultCSS .listItemDefaultCSS:not(:contains("${$(s)[0].currentTarget.innerHTML}"))`, element).css(inactiveTabStyle)
	})
})

-Hari 

Is there a way to hide the tabber title?

Hi @harikm007,

Thanks, I was able to reduce the font size. However, the default title hide feature does not work with tabber. Is there a way to hide the title of tabber?

 

Thanks,

Rahul

TJT
7 - Data Storage
7 - Data Storage

Hi Hari,

Is there a way to change font color of Active Tab and make font INITCAP (First letter capital following small letters).

TJT_0-1673521648356.png

i did tried updating the script, able play with borders but not font color

activeTabSyle = {'border': '3px black solid', 'font-size':'12px', 'color':'black solid'} //style for active tab

 

harikm007
13 - Data Warehouse
13 - Data Warehouse

Hi @TJT ,

Are you looking for something like below script ?(updated CSS for activeTabStyle and inactiveTabStyle). Here active tab will have red font color and in INITCAP

widget.on('ready',function(w, e) {
	
	basicstyle = {'border-radius':'10px', 'padding-left':'10px', 'padding-right':'10px'} //style for both active and inactive tabs
	activeTabSyle = {'border': '3px green solid', 'font-size':'20px', 'color':'red', 'text-transform': 'capitalize'} //style for active tab
	inactiveTabStyle = {'border' : '3px grey solid', 'font-size':'15px', 'color':'black', 'text-transform': 'uppercase'} //style for inactive tab
	
	$('.listDefaultCSS .listItemDefaultCSS', element).css(basicstyle) 

	$(`.listDefaultCSS .listItemDefaultCSS[index=${w.style.activeTab}]`, element).css(activeTabSyle) 
    $(`.listDefaultCSS .listItemDefaultCSS:not([index=${w.style.activeTab}])`, element).css(inactiveTabStyle)
	
	$('.listDefaultCSS .listItemDefaultCSS').on('click', function(s){
    	$(`.listDefaultCSS .listItemDefaultCSS:contains("${$(s)[0].currentTarget.innerHTML}")`, element).css(activeTabSyle)
    	$(`.listDefaultCSS .listItemDefaultCSS:not(:contains("${$(s)[0].currentTarget.innerHTML}"))`, element).css(inactiveTabStyle)
	})
})

-Hari

 

antoniooce7
7 - Data Storage
7 - Data Storage

Is there a way to readjust the Tabber widget to align the title with the other widget?