How to Remove the Grey Area in the Report Viewer

The grey area in a report viewer typically refers to the background or surrounding space of the report content. It is often used to create a clear distinction between the report itself and the surrounding interface elements. The purpose of the grey area is to provide a visual separation, helping to focus the user’s attention on the report content by minimizing distractions from the rest of the interface.

Box shadow is a visual effect applied to an element, such as a container or a box, within the report viewer. It creates the illusion of depth and adds a subtle visual highlight to the element. The box shadow effect is achieved by creating a shadow that appears behind and around the edges of the element, simulating the appearance of a raised or floating object.

Overall, both the grey area and box shadow contribute to the aesthetics and usability of a report viewer. The grey area helps to isolate the report content from the rest of the interface. At the same time, the box shadow effect adds visual depth and hierarchy to various elements, improving the overall user experience.

Remove the box shadow in the report viewer

The box shadow in the report viewer is the shadow that appears around the report area. You can remove the box shadow using CSS (Cascading Style Sheets) in your application. Follow these steps:

1. Add the following CSS code within the .e-reportviewer-pageview selector:

       .e-reportviewer-pageview
       {
           box-shadow: 0 0 0px 0px rgb(0 0 0 / 16%);
       }
   

2. This CSS code removes the box shadow from the report viewer, making it visually flat.

3. By making this change, you can remove the box shadow from the Report Viewer in Bold Reports. Refer to the following image for a visual representation.
   

   

Remove the grey area in the report viewer

You can remove the grey area by setting the report area to white. However, you can change the background color of the report viewer to match the report background color by using CSS (Cascading Style Sheets) in your application. Follow these steps:

1. Add the following CSS code within the .e-reportviewer-pageviewcontainer selector.

       .e-reportviewer-pageviewcontainer {
           background-color: white;
       }
   

2. This CSS code sets the background color of the report viewer’s page view container to white, effectively removing the grey area.

3. By making this change, you can remove the grey area from the Report Viewer in Bold Reports. Refer to the following image for a visual representation.