使相同宽度的KendoUI文本框

我有以下CSHTML登录形式：使相同宽度的KendoUI文本框

<div class="editor-label"> 
      @Html.LabelFor(model => model.UserEmailAddress) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.UserEmailAddress, new {@class = "k-textbox", style="width:200px"}) 
      @Html.ValidationMessageFor(model => model.UserEmailAddress) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.UserPassword) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.UserPassword, new { @class = "k-textbox", style="width:200px" }) 
      @Html.ValidationMessageFor(model => model.UserPassword) 
     </div>

的电子邮件地址是typr类k-textbox的，但密码是text-box single-line password。因此两者都有不同的宽度。即使在我试图明确指定宽度和类之后。我使用KendoUI进行MVC。输出为： enter image description here

这是页面的源代码：

<div class="editor-label"> 
      <label for="UserEmailAddress">User Name (Email Id)</label> 
     </div> 
     <div class="editor-field"> 
      <input class="k-textbox" data-val="true" data-val-regex="E-mail is not valid" data-val-regex-pattern="^[a-zA-Z0-9_\.-][email protected]([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}$" data-val-required="The User Name (Email Id) field is required." id="UserEmailAddress" name="UserEmailAddress" type="text" value="" /> 
      <span class="field-validation-valid" data-valmsg-for="UserEmailAddress" data-valmsg-replace="true"></span> 
     </div> 

     <div class="editor-label"> 
      <label for="UserPassword">UserPassword</label> 
     </div> 
     <div class="editor-field"> 
      <input class="text-box single-line password" data-val="true" data-val-required="Password required" id="UserPassword" name="UserPassword" type="password" value="" /> 
      <span class="field-validation-valid" data-valmsg-for="UserPassword" data-valmsg-replace="true"></span> 
     </div>

如何他们两个进行的同一类，样式和宽度。

来源

2013-09-23 Rohit Vipin Mathews

除了由Kendo定义的“k-textbox”类，Kendo标签的相关性是什么？你有没有尝试删除'k-textbox'类来查看这是你问题的根源？您是否也可以提供与您的登录部分相对应的HTML代码部分？ –

如果我把两个文本框中的“k-textbox”放在firebug中都有相同的宽度。 –

您需要更好地检查文本框。查看文本框的计算值。另请参阅这些“单行”和“密码”类生成的内容，以及它们是否影响宽度。注意你的密码文本框没有“k-textbox”，而是“文本框”。您使用标准HTML助手进行渲染，而不是Kendo助手，因此传递'new {@class =“k-textbox”，style =“width：200px”}不会产生任何内容。 –

我认为您的案例的最佳解决方案是编写自己的自定义HTML助手，这将允许您将其他信息传递到您的文本框。有关说明，请参阅this stackoverflow post。

如果你不想使用自定义HTML佣工一塌糊涂，只写纯HTML代码来代替：

<div class="editor-field"> 
    <input style="width:200px;" class="k-textbox single-line password" data-val="true" data-val-required="Password required" id="UserPassword" name="UserPassword" type="password" value="" /> 
    <span class="field-validation-valid" data-valmsg-for="UserPassword" data-valmsg-replace="true"></span> 
</div>

来源

2013-09-23 11:00:40

是的，我注意到剑道使用类的.text箱和单行，而不是K-的在某些输入字段上的文本框。我认为这发生在字段像数字这样的特定类型时。您可以重新设置.text-box类来匹配.k-texbox。

更新：实际上，我能够使用MVC 5语法将类k-文本框添加到输入字段。能够删除.text-box的类。

@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "k-textbox" } })

更新：只是找到了另一种方式。在模型中，我认为如果你使用[DataType（DataType.Password）]注解密码属性，那么在〜/ Views/Shared/EditorTemplates文件夹中应该有一个名为Password.cshtml的文件。这是使用Html.EditorFor和DataType为Password时用于显示的模板。模板应该添加k-textbox类以使两个字段保持一致。

@model object 

@Html.TextBoxFor(model => model, new { @class = "k-textbox", type = "password", autocomplete = "off", placeholder = ViewData.ModelMetadata.Watermark })

来源

2014-10-30 17:47:16 thienedits

当您使用EditorFor时，Kendo UI覆盖样式。改用TextBoxFor。

来源

2015-08-14 09:09:33

使相同宽度的KendoUI文本框

回答

相关问题