劍道調度器嵌入在劍道移動標籤條

Question

我有一個部分視圖中定義的劍道調度器。這個局部視圖在一個kendo移動標籤欄中呈現。

問題是調度程序似乎顯示在某個空容器的後面。正如我在手機（iPhone 5）上試用時看到的只是調度程序標題的一小部分。我可以看到「移動」版本被渲染（我使用谷歌Chrome瀏覽器開發工具來模擬手機上的顯示），當我在javascript中調用Databound事件並設置了「調試器」斷點時，但在事件執行後，一些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> 

爲局部視圖

[HttpGet] 
public ActionResult Index() 
{ 
    return this.PartialView("_Calendar"); 
} 

主計

返回的數據調度

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

Answer 1

與同事的控制器，我們終於找到了答案。這個問題似乎在kendo-mobile本身。如果我在移動標籤頁之外使用調度程序，則沒有佈局問題。問題只發生在tabstrib。

它似乎來自調度程序和tabsrip都添加容器「.km-content」的事實。當使用螢火蟲進行調試時，我們發現tabtrip視圖的第一個「.km-content」沒有相應調整大小。

我們發現了一種使用javascript手動管理的方法。爲了達到這個目的，我們計算標籤頁的頁眉和頁腳之間的大小，然後我們將它分配給標籤頁視圖的第一個「.km-content」。完成後，我們強制調度程序更新其自己的大小以適應新的可用高度。

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(); 
    } 
}