How to Make the Bold Reports Designer Page Responsive

Published:

Updated:

When using the Bold Reports Designer, users may find a display issue where the application occupies the full screen, even when the browser zoom level is set to less than 100%. However, the designer does not automatically adjust its size to fit the screen properly, which can lead to a suboptimal user experience.

Solution

To ensure that the Bold Reports Designer is responsive and adjusts correctly to various screen sizes and browser zoom levels, follow these steps:

Set the Width: Ensure that the width of the designer container is set to 100%. This allows the designer to utilize the full width of the available space.
Set the Min-Height: Set the min-height of the designer container to 100%. This ensures that the designer maintains a minimum height that adapts to the screen size.
Positioning: Set the position of the designer container to absolute. This positioning allows the designer to dynamically adjust its size based on the parent container and the viewport.

By implementing these changes, the Bold Reports Designer will respond effectively to changes in screen size and browser zoom levels, providing a better user experience.

Code Snippet:

<body>
   <!-- Designer container with responsive styles -->
   <div style="min-height: 100%; width: 100%; position: absolute" id="designer"></div>

   <script type="text/javascript">
       $(function () {
           // Initialize Bold Reports Designer
           $("#designer").boldReportDesigner({
               serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI"
           });
       });
   </script>
</body>

Snap Reference:

Click here to download the sample Designer Application.

Was this article useful?

Dislike

Comments (0)

How to Make the Bold Reports Designer Page Responsive

Solution

Access denied