Kendo Datetime Renders Verschiedene Sobald

Question

Veröffentlicht

Ich habe ein Problem, wo mein Kendo datetimerpicker rendert anders zwischen, wenn ich auf meinem lokalen Rechner laufen und wenn die Webseite

Script veröffentlicht wurde:

<script> 
    $(document).ready(function() { 
     $("#datetimepicker").kendoDateTimePicker({ 
      animation: { 
       close: { 
        effects: "faceOut zoom:out", 
        duration: 300 
       }, 
       open: { 
        effects: "faceIn zoom:in", 
        duration: 300 
       } 
      } 
     }); 
    }); 

HTML:

<div class="form-group"> 
     @Html.LabelFor(model => model.Highwatermark, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.EditorFor(model => model.Highwatermark, new { htmlAttributes = new { @class = "form-control", @id = "datetimepicker" } }) 
      @Html.ValidationMessageFor(model => model.Highwatermark, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

auf dem lokalen Rechner ausgeführt wird:

Veröffentlicht:

Es funktioniert immer noch, wenn ich auf, wo der Kalender und Uhr sein sollten, aber ich bin mir nicht sicher, warum die Bilder nicht nach oben zeigen.

Ich bin mir auch nicht sicher, warum sich der datetimepicker in beiden Fällen so weit ausdehnt.

Answer 1

Die form-control CSS-Klasse ist mit dem Aufweiten bezogen werden:

http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#use-form-control-bootstrap-css-class

Sie können die Standard-Datetime Breite von 15em mit einer benutzerdefinierten CSS-Regel wieder her:

.k-datetimepicker.form-control { 
    width: 15em; 
} 

Wenn Sie nur einige brauchen DateTimePickers, um ihre Standardbreite beizubehalten, wenden Sie eine weitere benutzerdefinierte CSS-Klasse in htmlAttributes zusätzlich zu form-control an und verwenden Sie sie im CSS-Selektor:

.k-datetimepicker.form-control.my-no-expand { 
    width: 15em; 
} 

Unter der Annahme, dass das Hauptthema Bilder (sprite.png und sprite_2x.png) auf dem Produktionsserver existieren, dann ist das Problem mit den fehlenden Symbolen kann durch die CSS verursacht wird Konfiguration Bündelung:

http://docs.telerik.com/kendo-ui/aspnet-mvc/fundamentals#css-bundling

Answer 2

Überprüfen Sie Ihre Kendo-CSS-Dateien. Manchmal müssen die relativen Adressen geändert werden, damit sie korrekt angewendet werden können. Es ist ein häufiges Problem. Zum Beispiel in CSS-Datei haben Sie so etwas wie:

background-image:url('Bootstrap/sprite.png') 

, die

background-image:url('2015.3.930/Bootstrap/sprite.png')