I. Overview
In dashboards, there are no options to set the styles of absolute block, so users cannot directly modify the style attributes such as its border, background color, transparency, and background image. How can I modify these styles?
II. Example
2.1 Report design
Create a new dashboard and add two absolute blocks, as shown in the following figure:
2.2 Picture preparation
Save the background image image1.jpg in folder %FR_HOME%\webapps\webroot\scripts\css, as shown in the following figure:
Click to download image1.jpg:
2.3 Add event
Select the absolute block absolute0 and add an After Initialization event, as shown in the following figure:
The JS code is as follows:
setTimeout(function() {
$("div[widgetname='ABSOLUTE0']").css("border", "5px solid black"); //Set the border thickness, line type and color of absolute0
$("div[widgetname='ABSOLUTE0']").css("opacity", "0.5"); //Set the opacity of absolute0 to 0.5
$("div[widgetname='ABSOLUTE0']").css("background", "pink"); //Set the background color of absolute0 to pink
$("div[widgetname='ABSOLUTE1']").css('background', 'url(http://localhost:8075/webroot/scripts/css/image1.jpg)');
//Set the background of absolute1 to the picture image1.jpg, which can be modified according to the actual situation
}, 20);
III. Effect preview
Save and preview the template. The preview effect on the PC side is as shown in the figure below:
Note: Mobile terminal is not supported.
Previous：JS Change the Styles of Cell or Row where Mouse Hover
