MVC 3: Can't Load Partial View without Inheriting CSS from Master Page (Telerik Report Viewer + Bootstrap)

StackOverflow https://stackoverflow.com/questions/16150636

Question

I'm having a css conflict/collision issue using Telerik Reporting in a MVC 3 application. It's a known issue that there is a css issue with the standard Site.css and their report viewer. However, our application is using Twitter Bootstrap for the UI css, and I cannot find the conflicting areas for anything. Since I can't find the conflicting css (I'm not even sure if I would be able to fix it without breaking the rest of the css in the application), my second thought was to load the partial view without the css, which should, in theory, work with no problems. However, I cannot get the partial view to load without inheriting the CSS from the master page. The site is using the Razor view engine, and the partial view with the report viewer is using the web forms view engine since Telerik has not updated their reporting yet (this is with Q1 2013). Is there any way I can force this view to load without inheriting any of the css from the Master Page (Layout.cshtml)? My code is below:

Main Page

@{
  ViewBag.Title = "Reports";
}

<h2>Reporting</h2>

@Html.Partial("_UnderContructionPartial")

@{
  Html.RenderPartial("ReportViewer");
}

View with Report Viewer

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<%@ Register Assembly="Telerik.ReportViewer.WebForms, Version=7.0.13.220, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" Namespace="Telerik.ReportViewer.WebForms" TagPrefix="telerik" %>
<%@ Register Assembly="Telerik.Reporting, Version=7.0.13.220, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" Namespace="Telerik.Reporting" TagPrefix="telerik" %>

<!DOCTYPE html>

<html>
  <head runat="server">
    <title>Report</title>
  </head>
  <body>
    <script runat="server">
      public override void VerifyRenderingInServerForm(Control control)
      {
        // to avoid the server form (<form runat="server"> requirement
      }
      protected override void OnLoad(EventArgs e)
      {
        base.OnLoad(e);
        var instanceReportSource = new Telerik.Reporting.InstanceReportSource();
        //instanceReportSource.Parameters.Add(new Telerik.Reporting.Parameter("UserName", ViewData["UserName"].ToString()));
        instanceReportSource.ReportDocument = new program1.Web.Reports.TestReport();
        ReportViewer.ReportSource = instanceReportSource;
        ReportViewer.ViewMode = ViewMode.PrintPreview;
      }
    </script>

    <form id="main" method="post" action="">
      <telerik:ReportViewer ID="ReportViewer" Width="100%" Height="800px" runat="server">
      </telerik:ReportViewer>
    </form>
  </body>
</html>

Controller

public ActionResult ReportViewer()
{
  return PartialView("ReportViewer");
}

This is what the report viewer looks like:

enter image description here

And this is what it "should" look like:

enter image description here

Was it helpful?

Solution

I just ran into the same issue and after a little bit of head banging this is what I came up with. Currently using MVC4 with Bootstrap.

I created a new .css file into ~/Content/ and added:

.InputButtonClass
{
    display: block;
    margin-top: 3px !important;
}

select
{
    height: 23px !important;
    font-size: 8pt !important;
}

input[type="text"], input[type="number"] .uneditable-input
{
    color: #555555;
    display: inline-block;
    font-size: 14px;
    height: 23px;
    line-height: 23px;
    margin-bottom: 5px;
    padding: 4px 6px;
    vertical-align: middle;
}

input, textarea, .uneditable-input
{
    width: auto;
}

.ReportToolbar INPUT
{
    height: 11px;
    padding-bottom: 3px;
}

#ReportViewer1_ReportToolbar_NavGr_CurrentPage_CurrentPage
{
    margin-top: 4px !important;
    padding: 3px 2px 3px 2px !important;
}

enter image description here

This made everything line up nearly perfect except the "Export" link, but I just increased the font size to 10pt and it looked fine. The select arrow is a little crushed, but I can live with it for now. Also I kept the background size at 28px and made the buttons smaller, but you may be able to just increase the size to 40px and keep the button sizes the same. Depending on what else you have within your view, you may need to tweak things slightly, but this should get you on the right track. I'm hoping when they release the next version of Telerik this becomes a lot easier.

EDIT: Only tested on Firefox and Safari. May need to add compatibility for IE / Chrome.

EDIT2: I added line-height to fix the issue in IE and Chrome not showing the page number.

    input[type="text"], input[type="number"] .uneditable-input
{
    color: #555555;
    display: inline-block;
    font-size: 14px;
    height: 23px;
    line-height: 23px;
    margin-bottom: 5px;
    padding: 4px 6px;
    vertical-align: middle;

    line-height: 10px;
}

Edit3: Using the CSS above may affect other selectLists you have in the view. A way to get past this is to create a new class and add it to your select list. This is how I did it.

View:

<form>
<select name="ReportIndex" class="select">
    <option value="1">Guest Report</option>
    <option value="2">--TBA--</option>
    <option value="3">--TBA--</option>
</select>
    <input type="submit" value="Change Report" />
</form>

CSS:

.select
{
    height: 30px !important;
    font-size: 10pt !important;
}

OTHER TIPS

Do you need to use a Partial View here:

return PartialView("ReportViewer");

You could try returning a View and then as a second paremeter pass in a different Layout csthml page that doesnt define any css file or just the css file you need.

so something like:

return View("ReportViewer" "~/Views/Shared/_TestLayout.cshtml");
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top