I. Overview
1.1 Requirement
The scrollbar will appear automatically when too many rows are present in the report block. How to hide the scrollbar and how to use the mouse scroll wheel to go upwards and downwards in the report block?
1.2 Solution
Use JS to get the overall width of the report block. Hide the scrollbar by modifying the width.
II. Sample
2.1 Design a template
2.1.1 Create a new decision-making report
Create a new decision-making report and set the Layout Type as Absolute Layout and the Zooming Mode as Area Fit, as shown below:
2.1.2 Design a report block
1) Insert a report block and design it as follows:
2) Click Freeze in the toolbar and the setup pane of Repeat and Freeze pops up. Select the Repeat Title Rows from 1 Row to No. 1 Row and freeze No.1 Row to No.1 Row, as shown below:
2.2 Add a [After Initialization] Event
Return to the form body, select report0 in the report block，add a [After Initialization] Event, and input JavaScript, as shown below:
Input the JS code:
setTimeout(function() {
var a = 'report0'; // Get the description of the report block.
var b = a.toUpperCase(); //Prevent errors of upper and lower cases. The description will be automatically converted to upper case.
var wid = ($("div[widgetname='" + b + "']").width() - 17) + 'px'; //Get the width of the report block.
$("div[widgetname='" + b + "']").css('width', wid); //Reset the width of the report block.
var height = ($("div[widgetname='" + b + "']").height() - 16) + 'px'; // Get the height of the report block.
$("div[widgetname='" + b + "']").css('height', height); //Reset the height of the report block.
}, 100);
Note
Note 1: Manually modify the description of the report block to hide the scrollbar.
Note 2: The width and height of the report block are reset in the JS. If there is only a vertical scrollbar, the width is not required to be reset.
Note 3: The solution is not applicable to hide the horizontal scrollbar.
2.3 Preview
Save the templates and select [Dashboard Preview]. The preview effect is as shown below:
