ASP.NET MVC 4应用程序中的CSS问题

Question

I created Report using Telerik Report Designer . then I integrated those report into my MVC 4 Application , Everything works fine ,

I followed this Telerik Tutorial

commented below snippet also (in Site.CSS File)

 input, textarea {
 border: 1px solid #e2e2e2;
 background: #fff;
 color: #333;
 font-size: 1.2em;
 margin: 5px 0 6px 0;
 padding: 5px;
 width: 300px;
}

 table {
 border-collapse: collapse;
 border-spacing: 0;
 margin-top: 0.75em;
 border: 0 none;
}
td {
 padding: 0.25em 2em 0.25em 0em;
 border: 0 none;
}

But I'm getting CSS issue like below attached image.

any suggestion Highly Appreciate,

Answer 1

I think site.css from MVC project messes up with telerik report. First, try removing site.css altogether. If that fixes the report, try doing the following:

Bring back site.css;

Put report it in its own container (ie <div class="report"></div> )

Put this at the end of site.css:

.report input, .report textarea
{
   width: initial;
   margin: initial;
   <..>
}

In other words try resetting CSS from report container;

Answer 2

I've bumped into similar issues where the in browser reports were mis-aligned. It turned out I was using an older version of the JS and CSS files than the version of Telerik Reporting I was using. Each version of Telerik Reporting has an updated version of these files. So just verify that it isn't a version mismatch.