Forum Discussion

rahuldhomane's avatar
rahuldhomane
ETL
03-02-2022
Solved

Tabber Formatting

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
Dashboards & Reporting
  • DashboardLover's avatar
    DashboardLover
    03-22-2022

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

rahuldhomane's avatar
rahuldhomane
ETL
03-07-2022

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's avatar
DashboardLover
Cloud Apps
03-22-2022

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

  • harikm007's avatar
    harikm007
    Data Warehouse
    03-22-2022

    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's avatar
      rahuldhomane
      ETL
      05-13-2022

      Is there a way to hide the tabber title?

    • rahuldhomane's avatar
      rahuldhomane
      ETL
      08-05-2022

      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's avatar
      TJT
      Data Storage
      01-12-2023

      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's avatar
        harikm007
        Data Warehouse
        01-16-2023

        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