Search code examples
jquerycssgoogle-chromesafarireport-viewer2010

Report Viewer 10 - CSS Issue

I'm new to reporting services and having trouble getting a report to render correctly on my ASPX page. I'm using MS Report viewer 10 using with asp.net 4.0.

Earlier my toolbar was not rendering correctly in Chrome & Safari

enter image description here

so after some R&D, i found & applied below script for the same

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () { fixReportingServices('divReport'); });

    function fixReportingServices(container) {
        if (navigator.userAgent.indexOf('Safari') != -1 || navigator.userAgent.indexOf('Chrome') != -1) {
            $('#' + container + ' table').each(function (i, item) {
                if ($(item).attr('id') && $(item).attr('id').match(/fixedTable$/) != null)
                    $(item).css('display', 'table');
                else
                    $(item).css('display', 'inline-block');
            });}}

so my toolbar problem got resolved :)

enter image description here

but after applying above so now im facing other CSS issue. now my page number is overlapped by report content. :(

enter image description here

SSRS Report

enter image description here

Any Suggestions Appreciated !!

Solution

  • Holy crap.. resolved by created below script.

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () { fixToolbar(); });

    function fixToolbar() {
        $("#ctl00_ReportViewer1_Toolbar table").each(function (i, item) {
            $(item).css('display', 'inline-block');
        });
    }