I. Overview
In actual projects, in order to make the widgets in the FineReport report consistent with the widgets on the page, it may be necessary to modify the styles of some widgets, such as changing the icon of the widget or changing the display style of it. Let's take a look at how to select FR widgets, and what styles can be modified.
II. Widget CSS
2.1 View widget class
Preview the report, place the mouse on the widget that needs to be investigated, right-click, and select Inspect to view the class of the corresponding widget.
2.2 Class selector of FR widgets
| Class Selector | Corresponding Style | Applicable Widgets |
|---|---|---|
.fr-texteditor | Text area border, typeface (size, color, font, etc.) | Text field, text area, drop-down box, drop-down check box, tree, date |
.fr-texteditor-focus | The border and typeface of the text box after getting the focus | Text field, text area, drop-down box, drop-down check box, tree, date |
.fr-trigger-texteditor | Drop-down control border, typeface (size, color, font, etc.) | Drop-down box, drop-down check box, drop-down tree, date |
.fr-trigger-texteditor-focus | The border and words of the drop-down control after getting the focus | Drop-down box, drop-down check box, drop-down tree, date |
.fr-combo-list-item | The border, typeface, background color, height of the drop-down item | Drop-down box, drop-down check box |
.fr-combo-selected | The border, typeface, and background color of the focused drop-down item | Drop down box |
.fr-combo-list-item-noselect | "Uncheck" in the drop-down menu, border, typeface, background color | Drop down box |
.fr-widget-click | Typeface and background color of the text in the drop-down item | Drop-down checkbox |
.fr-checkbox-checkon | Text frame, typeface, background color in the selected drop-down item | Drop-down checkbox |
.fr-checkbox-checkoff | The text border, typeface, background color of the unselected drop-down items | Drop-down checkbox |
.fr-list-bwrap | The background color of the list control | List |
.fr-list-node-anchor | Typeface | List |
.fr-list-node-over | The background color and font color of the list item moved up by the mouse | List |
.fr-list-node-selected | The background color and font color of the selected list item | List |
.fr-tree-node | The style of the tree list (background color, font, etc.) | View tree |
.fr-tree-elbow-plus | Plus icon style | View tree |
.fr-tree-node-collapsed | Unexpanded folder icon style | View tree |
.fr-tree-elbow-minus | Minus icon style | View tree |
.fr-tree-node-expanded | Expanded folder icon style | View tree |
.fr-tree-node-icon | Child node icon style | View tree |
.fr-btn-text | Typeface of the text in the button (size, color, font, etc.) | Button |
.fr-btn-up | Button width, height, background color, border | Button |
III. Example 1
Add a template parameter p1 to the parameter pane, and set it as a text field widget, the default value of the parameter is string "Region". How to make the widget border to be red, and font to be blue? This effect cannot be achieved by using the FineReport designer directly, so how to achieve this effect using CSS styles?
3.1 CSS Style coding
Create a new CSS file. In the table above, you can find that the class selector for the text field is .fr-texteditor, so you can enter the style of this class in the CSS file, as follows:
.fr-texteditor{ border:1px solid red; color:blue; font-weight:bold;}
Save this file as CSS.css under %FR_HOME%\webroot\scripts\css
3.2 Reference CSS
Open the template, click Template>Template Web Attributes, select Reference CSS, click the Select button, select the CSS file created just now, and click the Add button to add the CSS to the list below, as shown in the following figure:
3.3 Preview effect
Click to preview, as shown in the following figure:
Note:
In addition to referencing external CSS files, you can modify CSS styles through Web page events.
Click Template>Template Web Attributes>Preview settings, set individually for the template, add a loading end event, as shown below:
$(".fr-texteditor").css("color","blue");
$(".fr-texteditor").css("font-weight","bold");
$(".fr-texteditor").css("border","1px solid red");
IV. Example 2
If the widget is set disabled, it will be grayed out. What if we want it still to be the style of enabled widget?
4.1 Report design
Click Template>Template Web Attributes>Preview settings, set individually for the template, add a loading end event, as shown below:
$('.ui-state-disabled').css({'opacity':'1'});
$('.fst-edt').css('color','black');
Save and preview, the effect will be as if it were not disabled.
4.2 Parameter explain
| Value | Description |
|---|---|
value | Specifies opacity. From 0.0 (fully transparent) to 1.0 (fully opaque). |
inherit | The value of the opacity attribute is inherited from the parent element. |
Previous：Widget Object
