This is a migrated thread and some comments may be shown as answers.

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

1 Answer 1590 Views
MaskedTextBox
This is a migrated thread and some comments may be shown as answers.
Lisa
Top achievements
Rank 1
Lisa asked on 10 Jun 2014, 05:39 PM
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!  :)

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 12 Jun 2014, 08:29 AM
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!
 
Tags
MaskedTextBox
Asked by
Lisa
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or