Question

我正在使用一个使用Kendo UI的应用程序。我必须为默认的Kedno UI主题添加一些自定义样式。

但是，我在定位数字文本框时遇到问题，他们不希望与其他文本框保持一致（参见下图）。

我已经尝试将填充，边距（正面和负面）的每个组合添加到数字文本框的所有部分，但我做的任何事情都不能让它像其他选择框一样坐着。

有没有人有任何建议？我多年来一直是一名前端开发人员，从来没有像这样努力过，没有任何作用。

如您所见，数字文本框略低。

我的代码如下：

@using (Ajax.BeginForm("EditAccount", "Finance", null, new AjaxOptions { UpdateTargetId = "AccountDiv", OnSuccess = "AfterSaveAccount" }, new { id = "frmEditAccount" }))
{
     <div id="Process" class="label">
            @Html.LabelFor(m => m.IsPaymentOnHold)
            @(Html.Kendo().DropDownListFor(m => m.IsPaymentOnHold)
                  .DataTextField("Text")
                  .DataValueField("Value")
                  .BindTo(boolSelectListItems)
            )
        </div>
        <div class="label">
            @Html.LabelFor(m => m.IsFinanceCharge)
            @(Html.Kendo().DropDownListFor(m => m.IsFinanceCharge)
                  .DataTextField("Text")
                  .DataValueField("Value")
                  .BindTo(boolSelectListItems)
            )
        </div>
        <div class="label">
            @Html.LabelFor(m => m.FinanceChargePercent)
            @(Html.Kendo().NumericTextBoxFor<double>(m => m.FinanceChargePercent)
                  .Format("p")
                  .Decimals(4)
                  .Min(0.00)
                  .Max(0.99)
                  .Step(0.01)
                  .HtmlAttributes(new { @readonly = "readonly" })
                  )
        </div>
}

数字文本框会生成以下内容：

        <div class="label">
              <label for="FinanceChargePercent">Finance Charge Rate</label>
              <span class="k-widget k-numerictextbox" style="">
                    <span class="k-numeric-wrap k-state-default">
                           <input aria-readonly="true" aria-disabled="false" readonly="readonly" style="display: inline;" tabindex="0" class="k-formatted-value k-input" type="text">
                           <input aria-readonly="true" aria-disabled="false" aria-valuenow="0" aria-valuemax="0.99" aria-valuemin="0" class="k-input" style="display: none;" role="spinbutton" data-role="numerictextbox" data-val="true" data-val-number="The field Finance Charge Rate must be a number." id="FinanceChargePercent" max="0.99" min="0" name="FinanceChargePercent" readonly="readonly" step="0.01" value="0" type="text">
                        <span class="k-select"><span unselectable="on" class="k-link"><span unselectable="on" class="k-icon k-i-arrow-n" title="Increase value">Increase value</span>
    </span>
   <span unselectable="on" class="k-link"><span unselectable="on" class="k-icon k-i-arrow-s" title="Decrease value">Decrease value</span>
</span>
</span>
</span>
</span>
<script>
jQuery(function() {       jQuery("#FinanceChargePercent").kendoNumericTextBox({"format":"p","decimals":4   });
});
</script>
 </div>

我的CSS：

.label .k-numeric-wrap{
     padding:0 0  0 0;
     margin: 0 0 0 0;
}

.label .k-numeric-wrap .k-input{
    padding:0 0  0 0;
    margin: 0 0  0 0;
}
.label .k-numerictextbox {
    max-width:160px!important;
    width:100%;
    padding:0 0 0 0;
    margin:0 0 0 0;
}

Kendo UI-数字文本框：样式问题

0 个答案: