Kendo Numeric Textbox w. Custom Format - Not Working

Question

I have a large application that uses a lot of kendo numeric textboxes. As part of my current project, I have added a custom class to all of these elements.

My textboxes will look something like:

 @(Html.Kendo().NumericTextBox()
                  .Name("Transplanted")
               .HtmlAttributes(new {@class="form-control"})
                  .Value(Model.Transplanted)
                  .Decimals(0)
                  .Format("#")
                  .Min(0)
                  )

As soon as I add the custom class, the formatting stops working. Has anyone come across this issue before? I can add styles without an issue, but there is something about adding a class to the input that is breaking the formating.

Answer 1

Assuming the the form-control class is from Bootstrap, there is a conflict between it and some of the styling that Kendo applies as described here https://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#use-form-control-bootstrap-css-class

The work-around is to NOT use the form-control class on the NumericTextBox and instead just apply the underlying styles yourself.

In the case of a NumericTextBox, I have found that all I really need to apply is the width: 100%; part of the form-control styling and it all looks good.

Demo of form-control vs width 100%: https://dojo.telerik.com/@Stephen/iTURu