Successfully!

Error!

Hide scroll bar

  • Last update：  2021-12-02

    • I. Overview

    1. Version

    Report server version
    		Function changes
    10.0.19Added the JS interface to hide the report block scroll bar, a single line of code can hide the report block scroll bar

     

    2. Application scenarios

    When there is too much content in the report block, horizontal and vertical scroll bars will appear, which greatly affects the appearance of the report in Kanban and large screen applications. As shown below:

    For the beauty of the report, how to hide the scroll bar that appears?

    1.png


    3. Function introduction

    FineReport currently supports three methods of hiding:

    • Method 1: Use the official interface, but the interface is only applicable to 10.0.19 and later versions.

    • Method 2: Use JavaScript code to behind.

    • Method 3: Install 

    custom scroll bar plugin.zip

    II. Implementation method

    1. Interface introduction

    When using the interface, the event can be used as the "click event" of the button widget, or the "loading end" event of the template, or the "after initialization" event of the component, etc., which can be determined according to the actual scene.

    Note: The following interfaces are applicable to 10.0.19 and later versions.

    1)Hide the horizontal scroll bar

    MethodsetHScrollBarVisible(visibility)Set the horizontal scroll bar to show/hide, it will not follow the mouse wheel to scroll after hiding.
    Parametervisibility: boolean

    Whether the scroll bar is displayed, boolean, the default is true.

    true: display

    false: hide

    Return valuevoid
    Example

    Example 1: If the obtained report block object is defined as report, hide the horizontal scroll bar.

    report.setHScrollBarVisible(false);

    Example 2: Hide the horizontal scroll bar in general reports.

    _g().setHScrollBarVisible(false);

    Example 3: Hide the horizontal scroll bar of report0 report block in the dashboard.

    _g().getWidgetByName('report0').setHScrollBarVisible(false);

    Note: When the code is added to the "after initialization" event, it is recommended to add a delay function, otherwise an error may occur because the report block object is not completely created. Examples are as follows:

    setTimeout(function(){     
    _g().getWidgetByName('report0').setHScrollBarVisible(false);
    }, 500);

    Application

    example

    The horizontal scroll bar of report0 report block is hidden in the dashboard:

    Click to download the template:

    Hide horizontal scroll bar.frm2.png

    Mobile terminalIt does not support mobile terminal.

    2)Hide the vertical scroll bar

    Method
    		setVScrollBarVisible(visibility)Set the vertical scroll bar to show/hide, it will not follow the mouse wheel to scroll after being hidden.
    Parametervisibility: boolean

    Whether the scroll bar is displayed, boolean, the default is true.

    true: display

    false: hide

    Return valuevoid
    Example

    Example 1: If the obtained report block object is defined as report, hide the vertical scroll bar.

    report.setVScrollBarVisible(false);

    Example 2: Hide the vertical scroll bar in a general report.

    _g().setVScrollBarVisible(false);

    Example 3: Hide the vertical scroll bar of report0 report block in the dashboard.

    _g().getWidgetByName('report0').setVScrollBarVisible(false);

    Note: When the code is added to the "after initialization" event, it is recommended to add a delay function, otherwise an error may occur because the report block object is not completely created. Examples are as follows:

    setTimeout(function(){ 
    _g().getWidgetByName('report0').setVScrollBarVisible(false);
    }, 500);
    Application example

    Hide the vertical scroll bar of report0 report block in the dashboard:

    Click to download the template: 

    Hide vertical scroll bar.frm3.png

    Mobile terminalIt does not support mobile terminal.


    2. Use JS code

    Use JS to get the overall width of the report block, and hide the scroll bar by modifying the width of the report. After hiding, you can scroll up and down through the mouse wheel.

    For details, please refer to: JS hide report block scroll bar. Results as shown below:

    4.gif


    3. Install plugins

    After installing the scroll bar plugin, the scroll bar style is actually replaced, and it is unified into a gray long rounded rectangle, and it will follow the mouse wheel to scroll, but it will automatically hide when it is idle, making the interface simple.

    For details, please see: Custom Scroll Bar Plugin. The effect pircture are as follows:

    5.gif


    Attachment List


    Theme： Dashboard
    Already the First
    Already the Last
    • Helpful
    • Not helpful
    • Only read
    中文（简体） 中文（繁體） 日本語
    English

    Doc Feedback