ReportViewer looks ugly RRS feed

  • Question

  • User-1502494867 posted

    Hello everyone,

    I have a strange problem with my ReportViewer control in a web forms website. I added it from the toolbox and then I instantly got this mess. It looks the same when debugging the website on Firefox or IE. Therefore, I think that the whole source code is flawed.

    My colleague is using the report viewer by DevExpress (not the Microsoft one) and has exactly the same problem on a totally different machine. Therefore I think, that this seems to be a deeply routed problem. We both use Visual Studio 2012 and dotNET 4.5 on Windows 7 with the shipped IIS Express debugger.

    Any idea how I can fix that?

    Tuesday, December 11, 2012 11:17 AM

All replies

  • User1495804863 posted


    Check this post, may help you



    Tuesday, December 11, 2012 12:41 PM
  • User-1502494867 posted

    Hello sarathi125,

    I tried that solution and it seems to help a bit, but it still doesn't look quite right.

    Do you have any further ideas what I could do in order to fix that completely. The other problem is, that most of the clients at my company work with the latest Firefox release, and in there, it looks similar to the picture I posted yesterday.

    Thanks already in advance!

    Wednesday, December 12, 2012 2:32 AM
  • User-1502494867 posted

    Hello guys,

    I have some new information on the problem. I just created a new, completely empty asp.net project and added the control in there. And now, guess what, it looks perfectly fine. I came to the comclusion that there must be some bug in the web forms default stylesheet, which lets the navigation bar stretch until it looks like in the first screenshot. Do you have an idea what I could change in order to fix it?

    Wednesday, December 12, 2012 3:06 AM
  • User-1502494867 posted

    Hello guys,

    I finally managed to fix the problem. Well, I'm not sure, if it is really totally fixed, but it looks decent now. If you encounter the same problem, just follow these steps in order to fix it:

    1. Open the Content/Site.css file, which is a part of the web forms template
    2. In input, textarea, comment or delete margin: 5px 0 6px 0; padding: 5px; width: 300px;
    3. In the table definition, comment or delete margin-top: 0.75em;
    4. In the td definition, comment or delete padding: 0.25em 2em 0.25em 0em;

    If you make the three changes, the navigation bar will look normal again. However, it does still not look quite right. You can tweak it a little, by adding this custom definition:

    /* Own Additions */
    .ReportViewer div[id*='ctl05'] {
        padding-top: 2px;

    But please remember to add the property CssClass to the report viewer and set it to the value ReportViewer.

    It's not an ideal solution, and I'm pretty sure, there is even more to tweak, to make it look perfect, but it's now in a state, where I can use it.

    Thanks, guys!

    Thursday, December 13, 2012 4:45 AM