Removing the Black Frame in a Report with a Frozen Title Through JS

Problem

If a general report with a frozen title is centered, the report will be framed in black, and the scrollbar will be displayed far to the page edge during preview, as shown in the following figure.

Solution

You can add a Loading End event to hide the black frame and relocate the toolbar through JavaScript code.

Setting the Report Display Position

Open a centered template with a frozen title, choose Template > Web Attribute > Pagination Preview Setting, and set Report Display Position to Left, as shown in the following figure.

Adding a Loading End Event

Choose Template > Web Attribute > Pagination Preview Setting, add a Loading End event, and enter JavaScript code, as shown in the following figure.

The JavaScript codes are as follows:

var wrap = $('.reportPane');
var body = $('.page-block');
var dif = (wrap.width() - body.width()) / 2;
if(dif<0) dif=0;//If the page width exceeds the report width, align the report to the left.

body[0].parentElement.style.left = 0;

body.css({'margin-left': dif});//Center the report.
var center = $('.frozen-center');
var west = $('.frozen-west');
if (center.children().width() < center.width()) {
    west.css('overflow-x', 'auto');
    center.css('overflow-x', 'auto');
}//Remove the horizontal scrollbar.

Effect Display

Save the template and click Pagination Preview. The template is centered without any black frame, as shown in the following figure.

Note:

The effect cannot be previewed on mobile terminals.

Setting the Report Display Location

Open the template, choose Template > Web Attribute > Pagination Preview Setting, and set Report Display Position to Center, as shown in the following figure.

Adding a Loading End Event

Choose Template > Web Attribute > Pagination Preview Setting, add a Loading End event, and enter JavaScript code, as shown in the following figure.

The JavaScript codes are as follows:

setTimeout(
function()
{
$('.main-content-center').css({"border":"0px"});  // Remove the black frame.
$('.frozen-center').css({"overflow":"auto"})
$('.frozen-north').css({"overflow":"auto"})// Display the scrollbar when the content overflows the page.
}
, 10)

Effect Display

Save the template and click Pagination Preview. The template is centered without any black frame, as shown in the following figure.

Note:

1. A brief frame effect may appear during page turning, which does not affect normal usage. The scrollbar cannot be relocated using this method.

2. The effect cannot be previewed on mobile terminals.

1. Example One

For details, you can download the template Removing the Black Frame in a Report with a Frozen Title Through JS_1.cpt.

2. Example Two

For details, you can download the template Removing the Black Frame in a Report with a Frozen Title Through JS_2.cpt.