Report format shows cell spacing in Bootstrap

[Adam]

Found another issue when embedding the Report Viewer within a bootstrap site.  I found all my reports showed what looked like cell spacing in a table - see TelerikReportingBootstrapBefore.png.  This happened in Normal Viewing mode and Print Preview mode.

 All you need to do to fix it is add the following bold text before the #reportViewer1 style.  This fixes the issue for the report viewer and turns the report back to normal - see TelerikReportingBootstrapAfter.png.

<style>
        * {
             box-sizing: content-box!important;
         }
        #reportViewer1 {
            position: absolute;
            left: 5px;
            right: 5px;
            top: 5px;
            bottom: 5px;
            height: 100%;
            overflow: hidden;
            font-family: Verdana, Arial;
        }
    </style>​

[Stef]

Hi Adam,

Thank you for this post.
Indeed the box-sizing settings coming with bootstrap are applied on the report rendered as HTML and loaded in the DIV element of the viewer.

Whenever such issue occurs, the recommended troubleshooting approach is to check the HTML elements and their styles inheritance with the browser's developer tools (Firebug, F12 Developer Tools in IE, etc.). This will give you information which styles have to be changed.

Regards,
Stef
Telerik