Adding Report Builder web parts to SharePoint 2010 made the page colorful and intelligent, but the UI lacked a bit.

The parts that took up little horizontal space and lots of vertical space looked kind of goofy;

  • the data abruptly cut off vertically after 11 inches
  • they required a fixed vertical setting at about 2000px
  • they would not flow horizontally with the page’s liquid layout
  • they sometimes created two layers of scroll bars making moving around on the page very awkward

Data typically cuts off vertically after a certain length because of paging; the page breaks based on the Interactive Size setting of the Report pane set in Report Builder. The fix is to set the InteractiveSize settings to 0. Might as well do it on both horizontal and vertical properties.

Then add jQuery code in an HTM file strategically placed in a Documents Library like “Scripts” at some root site and call the file from a Content Editor web part on the report page. The following code seems to work – it works on ALL Report Builder web parts on the page and avoids conflicts with other parts.

<style type="text/css">
    .dynamic-height {height:auto !important;}
</style>
<script src="http://domainname/somerootsite/scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
    // use setTimeout method to delay
    $(window).load(function() {    
        setTimeout("FixReport()",2000);
    });
</script>
<script type="text/javascript">  
    function FixReport() {    
        // fix report height    
        $('div[RSViewer="RSViewer"] div').addClass('dynamic-height');    
        // remove report horizontal scrollbar
        $('div[id$="ReportViewer"]').css("overflow-x", "hidden");  
    }
</script>

Even if the Report Builder web parts only have 2″ to 5″ of width, you can extend the part up to 12″ wide. It will allow a single column page fill out nicely to the right when the browser expands to fit larger screens – same for parts in side-by-side zones.