Kendo Datetimepicker 在发布后呈现不同

Question

我遇到一个问题，我的 kendo datetimerpicker 在我运行在我的本地机器上和网页发布时呈现不同

脚本：

<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>

运行在本地机器上：

已发布：

如果我点击日历和时钟应该在的位置，它仍然有效，但我不确定为什么没有显示图像。

我也不确定为什么 datetimepicker 在这两种情况下都延伸这么远。

Answer 1

form-controlCSSclass与展开相关：

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

您可以使用自定义 CSS 规则恢复 15em 的标准 DateTimePicker 宽度：

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

如果您只需要一些 DateTimePickers 来保持它们的默认宽度，除了 form-control 之外，在 htmlAttributes 中应用另一个自定义 CSS class 并在 CSS 选择器：

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

假设主主题图像（sprite.png和sprite_2x.png）确实存在于生产服务器上, 那么图标丢失的问题可能是 CSS 捆绑配置引起的:

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

Answer 2

检查您的 kendo CSS 文件。有时需要修改相对地址才能正确应用。这是常见的问题。例如在 css 文件中你有类似的东西：

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

应更改为

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

Kendo Datetimepicker 在发布后呈现不同

Kendo Datetimepicker Renders Different Once Published

asp.net-mvc

kendo-ui

kendo-asp.net-mvc