Articles in this section
Category / Section

How to Customize the Zoom Toolbar Item Dropdown in Bold Reports

Published:
Updated:

In Bold Reports, the Zoom toolbar item dropdown in a report contains various dropdown values by default. You can customize this dropdown to meet your specific requirements by making changes to the CSS code in your application.

image.png

To achieve this, you need to make changes to the CSS code in your application. Follow the steps below:

  1. Locate the CSS file of your application responsible for report rendering.

  2. Add the following CSS code to your CSS file:

       .e-icon.e-arrow-sans-down {
         display: none;
       }
       
       #viewer_toolbar_zoom_popup li:nth-child(2) {
         display: none;
       }
    
  3. Save the CSS file and reload your report.

The first line of CSS code hides the e-arrow-sans-down icon, which is the icon that is used to expand the Zoom Dropdown. The second line of CSS code hides the third item in the Zoom Dropdown, which is the 75% item.

image.png

By changing the viewer_toolbar_zoom_popup li:nth-child(n), you can tailor the dropdown to meet your specific requirements. The value of n must be from 1 to 7. The denoted values are listed in the following dropdown.

n Zoom Dropdown Items
1 50%
2 75%
3 100%
4 125%
5 150%
6 175%
7 200%

To customize with the only one Zoom dropdown, you have to add the following CSS code to your CSS file:

image.png

    .e-icon.e-arrow-sans-down {
      display: none;
      }
    
    #viewer_toolbar_zoom_popup li:not(:nth-child(3)) {
      display: none;
      }

Using the not operator in the viewer_toolbar_zoom_popup li:not(:nth-child(n)), you can customize with only one Zoom dropdown to meet your requirements. The value of the n must be from 1 to 7. The denoted values are listed in the above table.

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied