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

7 thoughts on “Fixing Report Viewer control toolbar in Google Chrome

  1. I am also looking for a way to force the ReportViewer datepicker to show up in Chrome and Safari. Do you have any info on that?

  2. I am also looking for a way to force the ReportViewer datepicker to show up in Chrome and Safari. Do you have any info on that?

  3. That works fine for fixing the Header toolbar. But the data bind appears on half screen only. if we apply the jquery

    $('td#oReportCell', window.parent.frames[0].frames[0].document).next().remove();

    then the data is coming full screen. Again if we do sorting by clicking the column name, the data is displayed in half screen. Did u face this similar kind of issue?

  4. I am facing the below issue any help appreciated.
    All the controls (page nation, Zoom, find ,save etc…) on the report viewer toolbar are aligned top. How do I bring them to the center of the toolbar?

  5. @Vijai

    paste the same code in a controls postback, that should solve the problem 😉

    if ($.browser.webkit)
    {
    $(“.ms-report-viewer-control :nth-child(3) table”).each(function(i, item) {
    $(item).css(‘display’, ‘inline-block’); });
    }

Leave a Reply

Your email address will not be published. Required fields are marked *