Forum Discussion

Silutions's avatar
Silutions
ETL
12-27-2021
Solved

Center Pivot2 (Linux)

Just migrated from Windows to Linux.  Looking for a responsive Pivot2 script with will center the widget in it's container in place of the the standard left justify.  See below for example:

We have a script, but it requires adjusting the margin in the script and is not really great across various screen sizes.

Thanks, Jim

Linux
  • harikm007's avatar
    harikm007
    12-28-2021

    Hi Silutions ,

    Try this dashboard script. This script is adjusting the margin based on pivot container. So we don't need to adjust it manually. 

    dashboard.on('widgetready', function (se, ev) {
	
	//widgetid of pivot
	widgetid = '54cs60a78t22f4682g4555e2'
	
	if(ev.widget.oid == widgetid)
	{
		var pivotWidth = parseFloat($('[widgetid=' + widgetid + '] pivot2 .pivot-container .multi-grid .pivot-scroller .table-grid', element).width())/2
		$('[widgetid=' + widgetid + '] pivot2 .pivot-container', element).css('margin-left', 'calc(50% - ' + pivotWidth + 'px)')
	}
});

     

  • harikm007's avatar
    harikm007
    12-29-2021

    Silutions 

    Added a condition to check if width of pivot is greater than its container

     

    dashboard.on('widgetready', function (se, ev) {
	
	//widgetid of pivot
	widgetid = '61cb60a88c22f3002f4929e6'
	
	if(ev.widget.oid == widgetid)
	{
		var pivotWidth = parseFloat($('[widgetid=' + widgetid + '] pivot2 .pivot-container .multi-grid .pivot-scroller .table-grid', element).width())
        var containerWidth = parseFloat($('[widgetid=' + widgetid + '] pivot2 .pivot-container', element).width())
       	
		if(pivotWidth < containerWidth)
        	$('[widgetid=' + widgetid + '] pivot2 .pivot-container', element).css('margin-left', 'calc(50% - ' + (pivotWidth/2) + 'px)')
	}
});

     

  • harikm007's avatar
    harikm007
    02-10-2022

    Silutions ,

    Hope this dashboard script works for you:

    dashboard.on('widgetready', function (se, ev) {

	//widgetid of pivot
	widgetid = '61cb60a88c22f3002f4929e6'
	
	if(ev.widget.oid == widgetid && $('.u-r').length == 0)
	{
		var pivotWidth = parseFloat($('[widgetid=' + widgetid + '] pivot2 .pivot-container .multi-grid .pivot-scroller .table-grid', element).width())
        var containerWidth = parseFloat($('[widgetid=' + widgetid + '] pivot2 .pivot-container', element).width())
		
		if(pivotWidth < containerWidth && pivotWidth > 0 && containerWidth > 0)
        	$('[widgetid=' + widgetid + '] pivot2 .pivot-container', element).css('margin-left', 'calc(50% - ' + (pivotWidth/2) + 'px)')
	}
});

    -Hari

14 Replies

Replies have been turned off for this discussion
  • harikm007's avatar
    harikm007
    Data Warehouse
    12-28-2021

    Hi Silutions ,

    Try this dashboard script. This script is adjusting the margin based on pivot container. So we don't need to adjust it manually. 

    dashboard.on('widgetready', function (se, ev) {
	
	//widgetid of pivot
	widgetid = '54cs60a78t22f4682g4555e2'
	
	if(ev.widget.oid == widgetid)
	{
		var pivotWidth = parseFloat($('[widgetid=' + widgetid + '] pivot2 .pivot-container .multi-grid .pivot-scroller .table-grid', element).width())/2
		$('[widgetid=' + widgetid + '] pivot2 .pivot-container', element).css('margin-left', 'calc(50% - ' + pivotWidth + 'px)')
	}
});

     

    • Silutions's avatar
      Silutions
      ETL
      12-28-2021

      harikim007,

      Gave it a try.  Perfect!  Thank you so much.

      Regards, Jim

  • Silutions's avatar
    Silutions
    ETL
    12-28-2021

    Oops!  Just realized that there is an issue when the pivot is wider than the screen.  It centers rather than showing the left hand column.  See screenshot.

     

    • harikm007's avatar
      harikm007
      Data Warehouse
      12-29-2021

      Silutions 

      Added a condition to check if width of pivot is greater than its container

       

      dashboard.on('widgetready', function (se, ev) {
	
	//widgetid of pivot
	widgetid = '61cb60a88c22f3002f4929e6'
	
	if(ev.widget.oid == widgetid)
	{
		var pivotWidth = parseFloat($('[widgetid=' + widgetid + '] pivot2 .pivot-container .multi-grid .pivot-scroller .table-grid', element).width())
        var containerWidth = parseFloat($('[widgetid=' + widgetid + '] pivot2 .pivot-container', element).width())
       	
		if(pivotWidth < containerWidth)
        	$('[widgetid=' + widgetid + '] pivot2 .pivot-container', element).css('margin-left', 'calc(50% - ' + (pivotWidth/2) + 'px)')
	}
});

       

      • Silutions's avatar
        Silutions
        ETL
        02-04-2022

        Hari,

        Script works great on the dashboard, but is causing issues on PDF export.  The pivots on the PDF are shifting to the right so far that most of them are cut off.  I know that PDF export is  no fun, but wondering if you have solution for this issue?  Even ignoring the script on export will work for us.

        Thanks and regards, Jim

  • Silutions's avatar
    Silutions
    ETL
    12-29-2021

    harikm007 - thanks so much.  Working great!  You're the best! - Jim

  • oliviar's avatar
    oliviar
    Data Storage
    07-07-2022

    Hey harikm007 do you have a similar script that works for Windows? I am not sure what information you need about the system we are on and what's running (or how to check for that information) but I tried this script on my dashboard and it's not working.

    I have multiple widgets and text boxes on my dashboard. I just want to spruce it up and reduce some white space by centering the pivots that I have in their widget placement spaces.

    Can you help?

    Thanks!