Fix Position of Arrows in Kendo UI NumericTextBox

Environment

Product NumericTextBox for ProgressĀ® Kendo UIĀ®
Product Version 2019.2.514

Description

The Kendo UI NumericTextBox's arrows appear to be shifted in the wrong location. How can I adjust them to be centered as expected?

    <input id="numeric" class="k-textbox" />

    <script>
      $(document).ready(function() {

        $("#numeric").kendoNumericTextBox({
          min: 0,
          max: 100,
          value: 1,
          format:"n0",
        });

      });
    </script>

Solution

A common reason for the arrows to be misplaced is due to the inclusion of the k-textbox class in the input element. By removing the class, the Kendo UI NumericTextBox's appearance will be fixed.

    <input id="numeric" />

    <script>
      $(document).ready(function() {

        $("#numeric").kendoNumericTextBox({
          min: 0,
          max: 100,
          value: 1,
          format:"n0",
        });

      });
    </script>
In this article
Not finding the help you need? Improve this article