Center Pivot2 (Linux)

[Silutions]

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

[harikm007 · Accepted solution]

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 · Accepted solution]

@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 · Accepted solution]

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]

harikim007,

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

Regards, Jim

[Silutions]

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 · Accepted solution]

@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]

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

[harikm007]

@Silutions ,

Please try this script. It will not work when exporting the dashboard to pdf.

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)
        	$('[widgetid=' + widgetid + '] pivot2 .pivot-container', element).css('margin-left', 'calc(50% - ' + (pivotWidth/2) + 'px)')
	}
});

-Hari

[Silutions]

Hari,

Tested, but it is not working for me.  It doesn't center the pivot for me so I wasn't able to test the export.  I did change the widget oid to match my widget, but no joy.  What else could I be doing wrong?  FYI:  we are on L2022.1.

Regards, Jim

[harikm007]

@Silutions ,

You added it as dashboard script, right? And are you getting any error in browser console?

I tested it on L2021.3 and its working (widget is aligned center in dashboard but not in pdf) May be latest version doesn't support this script.

-Hari

[Silutions]

DUH!  of course I added as  widget script.  So used to doing that.  Anyway, tested and it works like a champ.

Thank you!  - Jim

[Silutions]

Hari - when an end user exits the pivot widget expand screen the pivot often slides off to the right of the container and the user only sees approx. half of the widget.  If they refresh the browser, the script fires and the widget is centered.  Is there a different call other than dashboard.on('widgetready', function (se, ev) that would run the script when that 'edit' menu is closed as well as dashboard load so the entire widget is visible without a screen refresh?

Thanks and regards, Jim

[harikm007 · Accepted solution]

@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

[Silutions]

Hari - looks like that did it.  Wouldn't have though of adding the additional conditions in the IF.   Thanks again.  Client is happy!  Regards, Jim

[Silutions]

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