使相同寬度的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文本框

回答

相關問題