How to Customize the Zoom Toolbar Item Dropdown in Bold Reports

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.

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.

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

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