cancel
Showing results for 
Search instead for 
Did you mean: 

Center Pivot2 (Linux)

Silutions
9 - Travel Pro
9 - Travel Pro

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:Capto_Capture 2021-12-27_12-21-58_PM.png

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

Thanks, Jim

2 ACCEPTED SOLUTIONS

harikm007
9 - Travel Pro
9 - Travel Pro

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)')
	}
});

 

View solution in original post

@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)')
	}
});

 

View solution in original post

5 REPLIES 5

harikm007
9 - Travel Pro
9 - Travel Pro

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)')
	}
});

 

View solution in original post

harikim007,

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

Regards, Jim

Silutions
9 - Travel Pro
9 - Travel Pro

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.

Capto_Capture 2021-12-28_06-32-06_PM.png

 

@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)')
	}
});

 

View solution in original post

Silutions
9 - Travel Pro
9 - Travel Pro

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