Any way to right-align value in field for input?

2 posts, 0 answers
  1. Lisa
    Lisa avatar
    20 posts
    Member since:
    Feb 2014

    Posted 10 Jun 2014 Link to this post

    Hi there,

    I'm using a masked text box as an incell editor for a grid.  I want to right-align the value in the editor field.  Please see the attached PNG file for how it looks currently.  I tried adding a class to the input field that right-aligned the value, but this right aligned the value+spaces to the right.  I'd like the last digit in the value to be over to the right edge of the input.

    Pertinent code is:

    columns: [
                      {
                          field: "accounting_category",
                          title: "CATEGORY"
                      },
                      {
                          field: "gl_code",
                          title: "GL CODE",
                          editor: glCodeMaskedTextEditor
                      }
                  ]


    and

    function glCodeMaskedTextEditor(container, options) {
        $('<input class="gl-code-edit" data-text-field="gl_code"
                   data-value-field="gl_code_id" data-bind="value:'
    + options.field + '"/>')
            .appendTo(container)
            .kendoMaskedTextBox({
            mask: "99999999999999999999",
            promptChar: " "
        });
    }

    Any way to do this?  Thanks!  :)
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 12 Jun 2014 Link to this post

    Hi Lisa,

    By design, the masked textbox works with fixed-length values, so there is no way to remove the spaces. However, it appears that in this case you can use a simple numeric textbox. The styling required to align the value to the right is shown below. The paddings below may depend on the font size.


    <input type="number" id="numerictextbox" value="1" class="myTextbox" />
    .myTextbox .k-numeric-wrap {
        padding-right: 28px;
    }
      
    .myTextbox .k-input {
        text-align: right;
        padding-right: 5px;
    }


    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top