NumberTextBox: request for numeric value alignment in form textbox

[richso]

this is a request for adding a setting (attribute) for numeric values alignment in textbox, e.g. align numeric value in textbox to right instead of fixed at the left in the current version 1.3 / 1.4b2

[bill]

The folks making the lucid theme are actually working on this, or perhaps just changing the default to be right aligned.

[jbondc]

Starting in trunk / 1.4.5, you add the following CSS:

For all input widgets:

.dijitInputField input {
    text-align: right;
}

Or for some specific widgets:

.numeric input {
    text-align: right;
}
<input dojoType="dijit.form.TextBox" name="textbox" class="numeric">

[jbondc]

*Starting in trunk / 1.5 realease*

[bill]

(In [23739]) By default, right align value of NumberTextBox, NumberSpinner, and CurrencyTextBox, as recommended by claro designers.

Also added dijitNumberTextBox CSS class for NumberTextBox widgets. CurrencyTextBox and NumberSpinner already have specific classes, dijitCurrencyTextBox and dijitSpinner, respectively.

Fixes #10377 !strict.

[iCanDo]

The css rule make errors in IE and Opera, if NumberSpinner is empty.

On focus/click there is no cursor.

.dijitNumberTextBox input.dijitInputInner, .dijitCurrencyTextBox input.dijitInputInner, .dijitSpinner input.dijitInputInner {
  text-align: right;
}

See ​http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html, Text Input Widgets, NumberSpinner, delete value, click somewhere and click NumberSpinner again.

[bill]

Good catch, like you said that happens anytime the NumberSpinner is empty, and it's occurring because of the padding-right: 0px setting on the <input> (.dijitInputInner). We set 0px padding in a couple of place, in [22060] and in claro/form/Common.css, plus from the dijitReset class setting on the <input>. 2px horizontal padding works better for IE, but not sure if that will break something else.

[bill]

Note that problem also happens with a plain NumberTextBox (at least on IE).

[bill]

(In [23907]) Rollback text-align: right change from [23739] since the caret is hidden on IE when at the far right (because textbox is empty or because user has positioned caret to the right of existing input).

Seems like we can make caret visible by setting padding-right but unclear if that will cause other problems.

Refs #10377 !strict.

[iCanDo]

Replying to bill:

Seems like we can make caret visible by setting padding-right but unclear if that will cause other problems.

For me the rule

.dijitNumberTextBox input.dijitInputInner,
.dijitCurrencyTextBox input.dijitInputInner,
.dijitSpinner input.dijitInputInner {
	padding-right: 1px;
	text-align: right;
}

solve the problem. Only change is padding-right.

[doughays]

padding-right makes IE6 misbehave (tested on test_Spinner.html)

[bill]

screenshot of arrow alignment problem on IE6 when padding added

[bill]

If it's just IE6 (and IE7?) that have render problems, we could set text-aiign: left for those browsers only, and text-align:right with padding for everyone else. (If it's also failing for IE8 then might as well give up.)

[iCanDo]

Replying to bill:

If it's just IE6 (and IE7?) that have render problems

Work in IE7, IE8, FF 3.6, Chrome 9, Safari 5 and Opera 11. IE6 make errors.

[iCanDo]

Replying to bill:
If possible, change the Milestone from future to 1.7.

[bill]

Bulk update of unassigned Dijit - form tickets