locked
How I disable vertical scroll bar of report viewer control on Web Form. RRS feed

  • Question

  • User-1356915459 posted

    I'm displaying .rdlc report file using Report viewer control on Webform. If  I Fix height of viewer control and data is not same as to size of viewer control then it display one scrollbar on viewer control and second vertical scroll bar is coming on webpage.

     I want to off viewer vertical scrollbar or in simple word's I don't want to display two scroll bar with my report. Please guide me or send me reference if any.

    Thanks,

    Thursday, June 28, 2007 6:12 AM

All replies

  • User1485238302 posted

    You to set two properties to make the repoertviewer autosize:

    AsyncRendering = false;

    and

    SizeToReportContent = true;

    Thursday, June 28, 2007 8:34 AM
  • User-1825045995 posted

    By the way that solution doesn't work :(

    Tuesday, April 22, 2008 2:34 PM
  • User2073390984 posted

    Here's what I did to remove the vertical scrollbar.

    1. Set the webpart height to 800px (or whatever suits your needs).
    2. Locate the Div ID that wraps around the web part (example: #ctl00_ctl10_g_002108f3_8e9e_47f6_aa29_dce37c6009)
    3. In a stylesheet like master.css add this line at the bottom:

    #ctl00_ctl10_g_002108f3_8e9e_47f6_aa29_dce37c6009 {
     overflow: hidden !important;
    }

    Wednesday, September 24, 2008 3:51 PM
  • User-218642546 posted

    AsyncRendering = false; and SizeToReportContent = true; it is working fine but navigation feature is not working

    bye

    narasimha

    Saturday, October 4, 2008 2:59 AM
  • User957409511 posted

    Even I had the same problem.. [:@]

    by doing the following stuff works here,

    AsynRendering="true",Width="100%",Height="Whatever u want", ** style="margin-bottom:30px(in mine case)"

    Hope it help u too ...[:)]

    Thursday, November 13, 2008 6:34 AM
  • User-587413235 posted

    This made the trick for me, great and simple idea!

    thanks !


    Even I had the same problem.. Angry

    by doing the following stuff works here,

    AsynRendering="true",Width="100%",Height="Whatever u want", ** style="margin-bottom:30px(in mine case)"

    Hope it help u too ...Smile


    Friday, August 21, 2009 4:04 PM
  • User-1825045995 posted

    This made the trick for me, great and simple idea!

    thanks !


    Even I had the same problem.. Angry

    by doing the following stuff works here,

    AsynRendering="true",Width="100%",Height="Whatever u want", ** style="margin-bottom:30px(in mine case)"

    Hope it help u too ...Smile


     

     

    Once you use a complex report you'll realize it doesn't solve the issue.

     

    It's a bug in Microsoft's horribly ugly control. It's really surprising that MS out something like that. 

     

    We contacted support and they told us it's bug and there isn't any plan of fixing it as of now.

     

    Nick

    Friday, August 21, 2009 6:03 PM
  • User-1367089028 posted

    Here's what I did to remove the vertical scrollbar.

    1. Set the webpart height to 800px (or whatever suits your needs).
    2. Locate the Div ID that wraps around the web part (example: #ctl00_ctl10_g_002108f3_8e9e_47f6_aa29_dce37c6009)
    3. In a stylesheet like master.css add this line at the bottom:

    #ctl00_ctl10_g_002108f3_8e9e_47f6_aa29_dce37c6009 {
     overflow: hidden !important;
    }

     

    I needed a similar but different solution. Report viewer in an aspx page with just one hyperlink above the RV had 

    Width="100%" Height="100%" AsyncRendering="false" SizeToReportContent="true"

     but the report data almost always had scrollbars in addition to the browser's.  Using F12 in IE8 I found the div with overflow:auto causing the problem with an ID like P04d35da423884a1e8480cc04e7080509oReportDiv but the guid part changed so I added

    <script language="JavaScript" type="text/JavaScript">

     window.onload=

    function setstart(){

     var els = document.getElementsByTagName('div');

    var i = els.length;

    while ( i-- )

    if( els[i].id.indexOf('ReportDiv') > 0 )

    els[i].style.overflow = 'visible';

    }

     </script>

    and FINALLY it looks right.

     

     

    Friday, November 6, 2009 5:33 PM
  • User1903625198 posted

    http://tech-days.blogspot.com/2009/11/sql-server-report-viewer-autosize.html

    Sunday, November 15, 2009 1:15 PM
  • User1760368748 posted

    Hi,

    Adjust the report borders means try to avoid the blank space between your design envirronment and report borders. If you are not properly adjust these borders it may take more space for report while rendering, because of this you will get scroll bars in the report. 

    Sunday, November 22, 2009 12:00 PM
  • User-821681831 posted

    Solution 1:- Hide the scroll bar by the below command.

     

    window.onload =

    function setstart() {

     

        var els = document.getElementsByTagName('div');

        var i = els.length;

        while (i--)

            if (els[i].id.indexOf('ReportDiv') > 0)

            els[i].style.overflowY = 'hidden';

     

    }

     

    <rsweb:ReportViewer ID="ReportViewer1"   Width="100%" runat="server">

    </rsweb:ReportViewer>

     

    Set the below properties of the ReportViewer

    ReportViewer1.Visible = true;

    ReportViewer1.AsyncRendering = false;

    ReportViewer1.ShowCredentialPrompts = false;

    ReportViewer1.SizeToReportContent = true;

     

     

    Solution 2 :- Add the below code on the bottom of the page after the </form> tag

    <script type="text/javascript">

     

        var els = document.getElementsByTagName('div');

        var i = els.length;

        parent.document.getElementById('ifName').style.height = (screen.height - 378) + "px";

        while (i--)

            if (els[i].id.indexOf('ReportDiv') > 0) {

            els[i].style.height = '448';

            els[i].style.overflow = 'scroll';

        }

     

    </script>

     

    The above code is for the screen resolution 1280/1024.

    For making the above the code working for different resolution we can change the height accordingly for the ReportViewer.

    <rsweb:ReportViewer ID="ReportViewer1"   Width="100%" runat="server">

    </rsweb:ReportViewer>

     

    Set the below properties of the ReportViewer

    ReportViewer1.Visible = true;

    ReportViewer1.AsyncRendering = false;

    ReportViewer1.ShowCredentialPrompts = false;

    ReportViewer1.SizeToReportContent = true;

    Wednesday, January 13, 2010 1:29 PM
  • User1760368748 posted

    have never used SharePoint services, but if you can edit the HTML, go to the IFRAME tag:

    <iframe src="Sample.aspx" ... ...>...</iframe>

    and add the attribute SCROLLING="no".

    <iframe scrolling="no" src="Sample.aspx" ... ...>...</iframe> 

    Sunday, January 17, 2010 2:37 AM
  • User2020219585 posted

        <script src="JS/jquery-1.4.2.min.js" type="text/javascript">
        </script>

        <rsweb:ReportViewer ID="reportViewer" runat="server" Width="100%" AsyncRendering="False" SizeToReportContent="True">
        </rsweb:ReportViewer>

        <script type="text/javascript" language="javascript">
            $(document).ready(function() {
                var reportDiv = $("div[id$='oReportDiv']").css("overflow-y", "visible")[0];
                if (reportDiv != null) {
                    reportDiv.style.height = reportDiv.scrollHeight + 15 + "px";
                }

            });
        </script>

    Wednesday, June 9, 2010 9:02 AM
  • User104367873 posted

    Unfortunately, asyncrender=false does not render an image with internal padding correctly.

    Friday, August 27, 2010 5:47 AM
  • User662388204 posted

    Had the same problem.  Took me MANY trial and error and finally got it...  Here is my code

     

     <asp:Panel ID="pnlParentResults" runat="server" ScrollBars="None" CssClass="ParentPanel" >
                            <rsweb:ReportViewer ID="rviewResults" runat="server" style="width:100%; overflow:hidden;"
                                    Font-Names="Verdana" Font-Size="8pt" ProcessingMode="Local" AsyncRendering="true" SizeToReportContent="true" >
                            </rsweb:ReportViewer>   
                        </asp:Panel>

    The key, for me, was using style="width:100%; overflow:hidden;"

    reportviewer.asyncRendering = true

    reportViewer.SizetoReportContent= true

    Works in FireFox 4, IE8

     

     

    Thursday, May 12, 2011 11:47 AM