Massoud Mazar

Sharing The Knowledge

NAVIGATION - SEARCH

ReportViewer control toolbar in Google Chrome browser

SQL Server Reporting Services ReportViewer control has a toolbar that is not displayed correctly in Google Chrome browser. You will see something like this:


 The correct display looks like this:


A workaround I'm using is to use JavaScript to find DIV and TABLE elements in the above toolbar and change their "display" style to "inline-block".

Following code can be added to the bottom of the page to accomplish this:

onode = document.getElementById("ReportViewer1_ctl00").nextDivObject();
for (var i = 0; i < onode.childNodes.length; i++) {
    if (onode.childNodes[i].nodeType == 1) {
        for (var j = 0; j < onode.childNodes[i].childNodes.length; j++) {
            if (onode.childNodes[i].childNodes[j].nodeType == 1) {
                onode.childNodes[i].childNodes[j].style.display = "inline-block";
            }
        }
    }
}

The nextDivObject() function is defined in the HEAD section of the page:

Object.prototype.nextDivObject = function() {
    var n = this;
    do n = n.nextSibling;
    while (n && n.nodeType != 1 && n.nodeName != "DIV");
    return n;
}

Comments (2) -

Written in jQuery its much cleaner Smile

if ($.browser.safari) {
$("#ReportViewerControl table").each(function(i, item) {
  $(item).css('display', 'inline-block');
});
}

Reply

Luis Carlos

No where to put the code on the website, I appreciate the help on this, Luis Costa Rica

Reply

Add comment