Kendo ui 剑道调度器嵌入在剑道移动tabstrip中

我在局部视图中定义了剑道调度程序。此局部视图在剑道移动选项卡条中渲染

问题是调度程序似乎显示在某个空容器后面。当我在手机（iPhone5）上试用时，我只看到调度器标题的一小部分

当我用javascript钩住数据绑定事件并设置“调试器”断点时，我可以看到“移动”版本被呈现（我使用google chrome Developer工具模拟手机上的显示），但在事件执行之后，一些div或其他容器部分覆盖了我的调度程序

如果我没有在调度程序的定义中指定“.Mobile（）”属性，它将相应地显示在我的手机上。但渲染的不是移动版本，我希望它是移动版本

我试图显示一个空的调度程序，但它也不工作

你知道我做错了什么吗

如果有任何缺少的信息可以帮助你，请随时索取

多谢各位

局部视图：

@model List<ISchedulerEvent>
@using System.Web.UI.WebControls
@using System.Linq;
@using Kendo.Mvc.UI

<section>
<br class="clear"/>
@(Html.Kendo().Scheduler<ISchedulerEvent>()
  .Name("scheduler")
  .WorkDayStart(8,0,0)
  .WorkDayEnd(18,0,0)
  .AllDaySlot(false)
  .ShowWorkHours(true)
  .Editable(false)  
  .Mobile()    
  .Views(v =>
         {
             v.DayView();
             v.WeekView();
             v.MonthView(monthView => monthView.Selected(true));
             v.AgendaView();
         })
  .DataSource(source => source
      .Read("GetEntries", "Calendar")))    
</section>

@using Kendo.Mvc.UI
@using T3.Web.Application.Infrastructure.Helpers

<style>
    .km-entry:after,
    .km-entry:before
    {
        content: "\e08d";
    }

    .km-summary:after,
    .km-summary:before
    {
        content: "\e04b";
    }

    .km-calendar:after,
    .km-calendar:before
    {
        content: "\e089";
    }
</style>

<div data-role="view" id="entry" data-title="Entrée de temps" data-layout="mobile-tabstrip"></div>
<div data-role="view" id="calendar" data-title="Calendrier" data-layout="mobile-tabstrip">@Html.Action("Index", "Calendar")</div>
<div data-role="view" id="summary" data-title="Sommaire" data-layout="mobile-tabstrip"></div>
<div data-role="view" id="profile" data-title="Profil utilisateur" data-layout="mobile-tabstrip" ></div>

<div id="maintabstrip" data-role="layout" data-id="mobile-tabstrip">
  <p>TabStrip</p>
  <div data-role="footer">
    <div id="tabstrip" data-role="tabstrip">
        <a href="#entry" data-icon="entry">Entrée de temps</a>
        <a href="#calendar" data-icon="calendar">Calendrier</a>
        <a href="#summary" data-icon="summary">Sommaire</a>
        <a href="#profile" data-icon="contacts">Utilisateur</a>
    </div>
  </div>
</div>

<script>
    var app = new kendo.mobile.Application($(document.body), { skin: "flat", useNativeScrolling: true });
</script>

为调度程序返回数据的控制器

public ActionResult GetEntries([DataSourceRequest]DataSourceRequest request)
{
   var entries = _presenter.GetEntries(base.GetUserAccount().Id);
   return Json(entries.ToDataSourceResult(request));
}

---

与同事一起，我们终于找到了答案。问题似乎出在剑道移动本身。如果我在mobile tabstrip之外使用调度程序，则不会出现布局问题。这个问题只发生在烟草上

这似乎是因为调度器和tabsrip都添加了一个容器“.km content”。使用firebug进行调试时，我们发现tabstrip视图的第一个“.km内容”没有相应调整大小

我们找到了一种使用javascript手动管理它的方法。为此，我们计算tabstrip的页眉和页脚之间的大小，然后将其指定给tabstrip视图的第一个“.km内容”。完成后，我们强制调度程序更新它自己的大小以适应新的可用高度

function resizeView() {

    var windowHeight = $(window).height();
    var tabstripFooterHeight = $(".km-footer").height();
    var tabstripHeaderHeight = $(".km-header").height();

    var padding = (tabstripFooterHeight + tabstripHeaderHeight + 5);

    var contentHeight = windowHeight - padding;
    $(".km-view:visible").children(".km-content").first().height((contentHeight));

    tryResizeScheduler(contentHeight);
}

function tryResizeScheduler(contentHeight) {

    /* Is the calendar tab */
    if (_app.view().id === "/") {
        var schedulerHeight = contentHeight - 1;

        var scheduler = $("#entryScheduler").data("kendoScheduler");
        scheduler.wrapper.height(schedulerHeight);
        scheduler.resize();
    }
}

function resizeView() {

    var windowHeight = $(window).height();
    var tabstripFooterHeight = $(".km-footer").height();
    var tabstripHeaderHeight = $(".km-header").height();

    var padding = (tabstripFooterHeight + tabstripHeaderHeight + 5);

    var contentHeight = windowHeight - padding;
    $(".km-view:visible").children(".km-content").first().height((contentHeight));

    tryResizeScheduler(contentHeight);
}

function tryResizeScheduler(contentHeight) {

    /* Is the calendar tab */
    if (_app.view().id === "/") {
        var schedulerHeight = contentHeight - 1;

        var scheduler = $("#entryScheduler").data("kendoScheduler");
        scheduler.wrapper.height(schedulerHeight);
        scheduler.resize();
    }
}