Fixing Report Viewer control toolbar in Google Chrome

In Chrome browser, Report Viewer (8 & 9) toolbar elements are displayed in multiple rows as shown below.

 

Report ViewerTB1

 

The quick fix for this to change the toolbar table display to ‘inline-block’ when toolbar is displayed. This can be done by applying the following simple Jquery script on document ready. Add css class ‘ms-report-viewer-control’ to your reportviewer control.


$(document).ready(function() {
   if ($.browser.webkit)
   {
	$(".ms-report-viewer-control :nth-child(3) table").each(function(i, item) {
	$(item).css('display', 'inline-block'); });
   }
});

After this fix, the toolbar elements are displayed in a single row

 

Report Viewer TB2

 

Hope this helps Smile