Willem
Giga Sage
Giga Sage

The following steps demonstrate how to use CSS on a Portal Widget Instance to resize text on that specific Widget Instance in the Portal.

This example uses an Instance of the 'Report'-widget, but apart from the CSS selector, all same steps can be used for other Widgets as well. In this example we increase the size of the font used in the Legend.

 

On the widget in the Portal, ctrl + right click on the widget and select 'Instance in Page Editor':

find_real_file.png

 

You should see (something similar as) the following:

find_real_file.png

 

In the CSS field enter the following and press Save:

g.highcharts-legend-item > text{
    font-size: 20px !important;
  }
  • change 20px to any size font you want
  • change g.highcharts-legend-item > text to the element selector of the item you want to resize if above is not working for your widget.
  • !important might not be needed, but is used to overrule any CSS on the element level.

 

And done, the font of the Legend is not 20px:

find_real_file.png

Version history
Last update:
‎01-29-2022 04:00 AM
Updated by: