网格中的iFrame弹出式内容减少了一半

Question

我有问题。我有一个popove，可在其中加载cshtml视图。该视图基本上只是一个网格容器。在引导程序3中，该视图已完全显示，但在引导程序4中，该视图被切成了两半，我不明白为什么。

正如您在sreenshot上看到的那样，弹出窗口内部的视图被切成两半，并且下面的空白区域未被使用。

容器网格视图的HTML：

@{
ViewBag.Title = SharedResources.Index.BathingPlan;
}

@Html.AntiForgeryToken()

<div id="data-container">
    <div class="row-clearfix">
        <!-- left side -->
        <div class="col-md-12">
            <div class="page-title">@SharedResources.Index.BathingPlan</div>
        </div>

        <div class="col-md-12 col-sm-12">
            <div id="main-grid-container">
                <table id="mDataTable" data-cols-num="6" class="table table-striped text-center" style="border:none;" aria-describedby="mDataTable_info">
                    <thead>
                        <tr class="actions-row" role="row">
                            <td class="header-action-row text-left" style="border: none !important; cursor:default;" colspan="8">
                                <h6 class='datatable-title'><span class='fa fa-list'></span>&nbsp; @SharedResources.Index.NumberOfPersonsToBatheByDay</h6>
                            </td>
                        </tr>
                        <tr>
                            <th></th>
                            <th class="col-8 text-center">@SharedResources.Index.Monday</th>
                            <th class="col-8 text-center">@SharedResources.Index.Tuesday</th>
                            <th class="col-8 text-center">@SharedResources.Index.Wednesday</th>
                            <th class="col-8 text-center">@SharedResources.Index.Thursday</th>
                            <th class="col-8 text-center">@SharedResources.Index.Friday</th>
                            <th class="col-8 text-center">@SharedResources.Index.Saturday</th>
                            <th class="col-8 text-center">@SharedResources.Index.Sunday</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: mainData" class="header-fixed-tbody">
                        <tr class="header-fixed-tr">
                            <td><span data-bind="text: PlannedHour"></span></td>
                            <!-- ko foreach: PeopleByDay() -->
                            <td data-bind="text: $data"></td>
                            <!-- /ko -->
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>
    @System.Web.Optimization.Scripts.Render("~/bundles/intervention-bathing-plan")
    <script>
        $(function () {
            //initialize
            app.BathingPlan.Init();
        });
    </script>

弹出式窗口的内容会被剔除：

//knockout computed propeties
model.interventionAdditionalInfoUrl = ko.computed(function () {
    $("#interventionAdditionalInfo").popover('destroy');
    var url = null;

    url = GetInterventionInfoUrl(model.residentId(), model.interventionType());

    if (url != null) {
        setTimeout(
            function () {
                var content = '<iframe id="iframe-intervention-info" src="' + url + '" scrolling="yes" horizontalscrolling="no" verticalscrolling="yes" frameborder="0"></iframe>';
                $("#interventionAdditionalInfo").popover({
                    html: true,
                    placement: 'top',
                    container: 'body',
                    viewport: '#LoadModalInterventions',
                    content: content
                });
            }, 500);
    }
    return url != null ? true : false;
}, model);