Tabber Formatting

[rahuldhomane]

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

[Chandra]

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"]
  }
]; 

[rahuldhomane]

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.

[DashboardLover · Accepted solution]

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

[harikm007]

@DashboardLover @rahuldhomane 

Please try below script:

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 

[rahuldhomane]

Is there a way to hide the tabber title?