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:
-
Locate the CSS file of your application responsible for report rendering.
-
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; }
-
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.
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:
.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.