Resize text using CSS on the Portal
Import
·
Jan 29, 2022
·
article
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':
You should see (something similar as) the following:
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:
View original source
https://www.servicenow.com/community/developer-articles/resize-text-using-css-on-the-portal/ta-p/2323251