Forum Discussion

lharrison's avatar
lharrison
Cloud Apps
12-15-2021
Solved

Resizing widgets past their size limits

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?

dashboards & reporting
  • harikm007's avatar
    harikm007
    12-16-2021

    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

6 Replies

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

    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's avatar
    EricB10
    Cloud Apps
    02-08-2022

    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's avatar
      harikm007
      Data Warehouse
      02-08-2022

      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

  • PaulN052's avatar
    PaulN052
    Data Storage
    07-21-2022

    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's avatar
    Irina
    Data Storage
    10-19-2023

    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?