Kendo Numeric Textbox Text Padding

Question

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?

Answer 1

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

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

Answer 2

I fixed it with this css, instead of having fixed width, we can calculate it

 .k-numerictextbox .k-input {
    width: calc(100% - 4px);
    text-align: right;
    padding-right: 4px !important;
}