JS Title text remains centered

1.1 Problem

When making some wide reports, the width of the report far exceeds the width of the page, and then a horizontal scroll bar appears. If we set the report title to be centered in the merged cell, it is very likely that the title will not be visible.

In this case, we hope that the title of the report will always be displayed in the middle of the screen. The effect is shown in the following figure:

1.2 Solution

Write JS to get the scrolled distance, and combine the width of other elements on the page to reposition the title.

Note: This function does not support mobile devices.

2.1 Report design

Create a new database query, use the following SQL statement:

SELECT * FROM StationSalaryStatistics limit 20

Drag the data fields to corresponding cells, merge the first row of cells, and enter the title:

Note: In order to get the width of the title in JS, add id element mark to the title.

<span id="title_text">StationSalaryStatistics</span>

Text is left aligned and select [Display by HTML]. And adjust table format.

2.2 Add JS event

1. Click [Template]-[Web Attributes]-[Data Entry Settings]

2. Select [Individually set for the template]

3. Add [Loading End] event, and enter the following JS:

b=$('.content-container').scrollLeft();   
c=$("#title_text").width(); 
d=$(".x-table").width(); 
if(a>d){
     $("[id^=A1-]").css("text-align","center");
}else{
$("[id^=A1-]").css("padding-left",(a/2+b-c/2));
}
}
retitle(); 
$('.content-container').scroll(function(){
          retitle();        
})

2.3 Preview effect

Save the template, select [Data Entry Preview] , the effect is shown in the figure below:

Title text remains centered.cpt