Kendo UI MaskedTextBox - 0宽度/高度

Question

我试图使用Kendo UI MaskedTextBox。我使用MVC包装器。我无法显示小部件。它始终呈现宽度/高度为0.控制台显示没有错误。为什么会这样？ （是的，我知道我可以通过指定HtmlAttributes手动强制维度，但这不是必需的。）

我的代码：

<div class="inputs">
    @Html.LabelFor(model => model.Phone):
    @(Html.Kendo().MaskedTextBox()
        .Name(Html.NameFor(model => model.Phone).ToString())
        .Mask("(000) 000-0000")
        .PromptChar("#")
        .Value(Model.Phone)
    )
</div>

这是生成的代码。该值有效，我将其替换为2s以保护隐私。

<div class="inputs">
    <label for="Phone">Phone</label>:
    <input id="Phone" name="Phone" value="(222) 222-2222" data-role="maskedtextbox" class="k-textbox" autocomplete="off">
    <script>
        jQuery(function(){jQuery("#Phone").kendoMaskedTextBox({"mask":"(000) 000-0000","promptChar":"#","rules":{}});});
    </script>
</div>

Chrome开发工具检查器分别按kendo.common-bootstrap.css显示宽度和高度设置为2px和6px。这些值完全是边框和填充，元素本身是0x0。相关的选择器代码如下。

宽度：

.k-autocomplete,
.k-combobox,
.k-datepicker,
.k-timepicker,
.k-datetimepicker,
.k-colorpicker,
.k-numerictextbox,
.k-dropdown,
.k-selectbox,
.k-textbox,
.k-toolbar .k-split-button {
  position: relative;
  display: inline-block;
  width: 12.4em;
  overflow: visible;
  border-width: 0;
  vertical-align: middle;
}

高度：

input.k-textbox {
  height: 2.42em;
  text-indent: 0.8em;
  line-height: 1.6em;
}