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?

[rahuldhomane]

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]

Hi Hari,

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

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]

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]

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