Report not displaying correctly

[Craig]

I am using the HTML 5 control in a MVC application.  I have my test report being displayed but the format is wrong (see attache file).  It prints correctly when outputting it to PDF.

The code to display the report is -

@model EPH.Models.ReportViewerModel

@{
    ViewBag.Title = "Reports";
}

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="~/ReportViewer/styles/telerikReportViewer-8.1.14.804.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.blueopal.min.css" rel="stylesheet" />

<script src="~/ReportViewer/js/telerikReportViewer-8.1.14.804.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>

<style>
    #reportViewer1 {
            position: relative;
            width: 100%;
            height: 500px;
        }
</style>

@{
    var reportSource = new UriReportSource() { Uri = "TestReport.trdx" };
}

<div class="container">
    <form class="form-horizontal" id="myform" name="myform" method="post" role="form">
        <div class="form-group">
            <div class="col-md-4">
                <div class="panel panel-default equal">
                    <div class="panel-heading">Report List</div>
                    <div class="panel-body">
                        <label class="col-md-2 control-label input-sm">Report Name:</label>
                        <div class="col-md-8">
                            @Html.DropDownListFor(m => m.ReportId, new SelectList(Model.ReportsTextList, "ReportId", "Name"),
                                         new { @class = "form-control input-sm-select", @id = "report-selection" })
                        </div>
                    </div>
                </div>
                <div id="panel_ReportParameters" class="panel panel-default equal">
                    <div class="panel-heading">Report Parameters</div>
                    <div class="panel-body">
                        @Html.Partial("_ReportParameters")
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="panel panel-default equal">
                    <div class="panel-heading">Selected Report</div>
                    <div class="panel-body">
                        @(Html.TelerikReporting().ReportViewer()
                                .Id("reportViewer1")
                                .ServiceUrl(Url.Content("~/api/reports/"))
                                .TemplateUrl(Url.Content("~/ReportViewer/templates/telerikReportViewerTemplate-8.1.14.804.html"))
                                .ReportSource(reportSource)
                                .ViewMode(ViewModes.INTERACTIVE)
                                .ScaleMode(ScaleModes.SPECIFIC)
                                .Scale(1.0)
                                .PersistSession(false)
                                .PrintMode(PrintMode.AutoSelect)
                        )
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 nopadright">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <a href="" id="viewbutton" type="button" class="btn btn-info" style="width:100%">Update Report</a>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    $('#report-selection').change(function () {
        var reportId = $(this).val();
        //        alert(reportId)
        $.ajax({
            type: "POST",
            url: '@Url.Action("RefreshReport")',
            traditional: true,
            data: { reportId: reportId },
            success: function (data) {
            }
        });
    });

</script>

[Squall]

Make sure that you don't have any global styles that may interfere with the report elements.

SN