How can I resize the widget "Report" in Service Portal

[Alessa]

Hello dear community, I need help:

I need to know how can I modify the size of the "report" widget in service portal. I have tried several ways but without success

I need the 2 reports on the right side to be (both) the same height of the report on the left side?

I hope you can help me

[Gunjan Kiratkar]

Hi @Alessa ,

a) if you are using the OOTB Report widget on your page:
- set "CSS class" on the widget container, then in the Page CSS you can set the height of it:

.your-container-class-name .chart-container {
  height: 200px;
}

b) if it is an embedded Report widget in one of your existing widgets:
- set these styles in your widget CSS:

.chart-container {
  height: 200px;
}

You can wrap the report widget in a div with a class, then you can be more specific like in a).

Note: "chart-container" is a HTML element in the OOTB Report widget.

Please mark my answer as helpful/correct if it resolves your query.

Regards,

Gunjan Kiratkar

Consultant - ServiceNow, Cloudaction

Rising Star 2022

[Alessa]

Hello Gunjan, thank you for your help:

I performed what you advised (unsuccessfully):

1. "CSS class" on the widget container:

2. In the page set the height:

But nothing changes. Can you help me figure out what I did wrong?

Thank you very much

[Alessa · Accepted solution]

I found the solution, I'll leave it here in case someone else finds it useful in the future:

Because the "report" widget does not have the "Bootstrap class name" field to be able to make the changes in "Page", you need to go to the "Page Editor" to make the changes.

In the search engine enter the name of the widget page and select the instance where the widget you want to modify is located.

In CSS place the size, etc, and in "Additional options, JSON Format", place the ID (that you will have to look for in the platform) of the report.

CSS

.report_content{
height: 133px !important;
}

Additional options, JSON Format

{
	"report_id": {
		"value": "12345678910", // Here you have to paste de ID of the report
		"displayValue": "SLA 1a Atención."
	},
	"show_title": {
		"value": "true",
		"displayValue": "true"
	}
}

This is the result I got (I managed to reduce the size of the 3 reports on the right side, so that they had the same height as the report on the left side)

[NihSri]

Hi @Alessa 

How to implement the same (update the height) on the out of the box 'performance-analytics" widget?