cancel
Showing results for 
Search instead for 
Did you mean: 

Resizing widgets past their size limits

lharrison
8 - Cloud Apps
8 - Cloud Apps

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. 

lharrison_0-1639578794890.png

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?

1 ACCEPTED SOLUTION

harikm007
12 - Data Integration
12 - Data Integration

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

View solution in original post

4 REPLIES 4

harikm007
12 - Data Integration
12 - Data Integration

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
8 - Cloud Apps
8 - Cloud Apps

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
12 - Data Integration
12 - Data Integration

@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
8 - Cloud Apps
8 - Cloud Apps

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

Voice of Customer
Impact Business Intelligence (BI) and Analytics Market Research

Click Here & Complete Dresner's Wisdom of Crowds® Market Study Survey Today!

Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Need additional support?:

Community Support Request

Don't miss out:

Earn a BETA Launch Challenge Badge!