Search code examples
csskendo-uikendonumerictextbox

Kendo Numeric Textbox Text Padding

I have a Kendo NumericTextBox in which I would like to right-align the text with some padding.

Here's telerik's demo page: http://demos.kendoui.com/web/numerictextbox/index.html

I have applied the following style, which aligns the text ok:

/*Right align numeric text*/
.k-numerictextbox .k-input {
    text-align: right;
}

My problem is, whenever I add padding, the up/down arrows are squished instead of my text shifting.

I've tried setting the box-sizing to border-box, but can't quite get it right.

Anyone with some css skills want to take a look?

Solution

  • I've applied the following style to achieve the goal. 

    .k-numerictextbox .k-input {
    width: 96%;
    text-align: right;
    padding-right: 5px !important;
}