Remove Extra Ccroll Bar when Freezing the Ranks

When using frozen rows and columns in the report, no matter whether the frozen row height is super high or not, when the row height is adjusted, an extra scroll bar will appear on the right side. Regardless of whether the content in the column is super wide or not, an extra scroll will appear in the horizontal direction below. Bar, as shown below:

This display is not very beautiful. How to solve it.

When the row is frozen, the corresponding scroll bar on the right is frozen-north, when the column is frozen, the corresponding scroll bar at the bottom is frozen-west. Set the overflow-x and overflow-y attributes of these two scroll bars to remove them. These two extra scroll bars.

Note: The function of hiding redundant scroll bars can also be realized by installing Custom Scroll Bar Plugin.

3.1 Open the template

Open the template: %FR_HOME%\webroot\WEB-INF\reportlets\demo\Report\Partition and Freeze.cpt

3.2 Add loading end event

ClickTemplate>Web Attributes, select the Pagination Preview, choose Individually set for the template, and add the Loading End event, as shown in the following figure:

The js code is as follows:

//Set the vertical scroll bar on the right side to automatically show or hide when the row is frozen
//If you need to always hide the vertical scroll bar of the frozen row, use
//$(".frozen-north").css('overflow-y','hidden');
$(".frozen-north").css('overflow-y','auto'); 
//If you need to hide the horizontal scroll bar of the frozen column, use
//$(".frozen-west").css('overflow-x','hidden');
//When setting the frozen column, the horizontal scroll bar below is automatically displayed or hidden
$(".frozen-west").css('overflow-x','auto');

Note: overflow-x: horizontal scroll bar, overflow-y: vertical scroll bar. Possible values are scroll- always display, auto- automatically display or hide according to the content, hidden- never display.

3.3 Effect preview

After saving, click Pagination Preview, the scroll bars of the x-axis and y-axis are hidden, and the effect is as follows:

Note: If the row and column grid lines are misaligned, install a Custom Scroll Bar Plugin.

Click to download the template: 

Partition and Freeze.cpt