Resizing widgets past their size limits

[lharrison]

Hello. When using tables with aggregation, I often want to display a single row of data. The widget won't let me reduce the height enough to get rid of all the white space (see below). This is the minimum height of the widget. 

I would like to be able to make the widget exactly as tall as it needs to be to show that single line table. Is there a way I can do this through scripts?

[harikm007 · Accepted solution]

Hi @lharrison ,

Try this dashboard script. Here height is hardcoding, not dynamically adjust based on number of rows in table. (assign your widget ID and required height in the variables)

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

	widgetid = '615ee0063312d60030f8060c'
	widget_height = 100

	$.each(ev.dashboard.layout.columns, function(columnIndex, column){
		$.each(column.cells, function(cellIndex, cell){
			$.each(cell.subcells, function(subcellIndex, subcell){
				if(subcell.elements[0].widgetid == widgetid)
				{	
					subcell.elements[0].height = widget_height + 'px'
					subcell.elements[0].minHeight = widget_height
					subcell.elements[0].maxHeight = widget_height
				}
			
			})
		})
	
	})
	
	ev.dashboard.layout.defaults.widget.minHeight = 0
	ev.dashboard.layout.defaults.widget.maxHeight = widget_height
});

 Thanks.

Hari

[EricB10]

Hello,

I am trying to do something similar, but instead of hard-coding widget sizes I want to set them proportional to the total dashboard size.  ie:

var totalWidth = dashboard.width
widgetA.width = totalWidth*(2/3)
widgetB.width = totalWidth*(1/3)

Does anyone know if this is possible?  Thanks!

[harikm007]

@EricB10 ,

If there are 2 widgets side by side in a dashboard, its possible to specify percentage of width for each widget. Here is the sample code:

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

	widgetid1 = '61f3b6e456c611236ee3erc3'
	widgetid2 = '12erf99a65c6167uiee3edda'
	
	widgetWidth1 = 20 //equivalent to 20%
	widgetWidth2 = 80 //equivalent to 80%, sum of widgetWidth1 and widgetWidth2 should be 100

	$.each(ev.dashboard.layout.columns, function(columnIndex, column){
		$.each(column.cells, function(cellIndex, cell){
			$.each(cell.subcells, function(subcellIndex, subcell){
				if(subcell.elements[0].widgetid == widgetid1)
				{	
					subcell.width = widgetWidth1
				}else if(subcell.elements[0].widgetid == widgetid2)
				{	
					subcell.width = widgetWidth2
				}
			
			})
		})
	
	})
});

 -Hari

[EricB10]

@harikm007thank you this looks great!!  And thank you for replying so quickly 😄

[PaulN052]

Hi,

Similar to the issues above. I was trying to maintain the resolution of a chart type widget so that the value label never disappears from the top of the widget. I this possible?

Thanks

[Irina]

I have the similar problem, but the solution above works only with the first widget in a tabber, but when I switch the tabber the width of widgets become equal (( Is there another script for it?