Opened 11 years ago
Closed 5 years ago
#10377 closed enhancement (fixed)
[patch] NumberTextBox: right align numbers
Reported by: | richso | Owned by: | bill |
---|---|---|---|
Priority: | high | Milestone: | 1.11 |
Component: | Dijit - Form | Version: | 1.4.0b |
Keywords: | claro | Cc: | |
Blocked By: | Blocking: |
Description
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
Attachments (1)
Change History (25)
comment:1 Changed 11 years ago by
Component: | General → Dijit |
---|---|
Keywords: | lucid added; textbox numeric alignment removed |
Milestone: | 1.4 → 1.5 |
Owner: | anonymous deleted |
Summary: | request for numeric value alignment in form textbox → NumberTextBox: request for numeric value alignment in form textbox |
comment:2 Changed 11 years ago by
Keywords: | claro added; lucid removed |
---|
comment:3 Changed 11 years ago by
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">
comment:5 Changed 11 years ago by
Milestone: | 1.5 → 1.6 |
---|
comment:6 Changed 10 years ago by
Resolution: | → fixed |
---|---|
Status: | new → closed |
(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.
comment:7 Changed 10 years ago by
Resolution: | fixed |
---|---|
Status: | closed → reopened |
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.
comment:8 Changed 10 years ago by
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.
comment:9 Changed 10 years ago by
Note that problem also happens with a plain NumberTextBox (at least on IE).
comment:10 follow-up: 12 Changed 10 years ago by
(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.
comment:11 Changed 10 years ago by
Milestone: | 1.6 → future |
---|
comment:12 Changed 10 years ago by
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.
Changed 10 years ago by
Attachment: | ie6PaddedSpinner.gif added |
---|
screenshot of arrow alignment problem on IE6 when padding added
comment:14 follow-up: 15 Changed 10 years ago by
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.)
comment:15 Changed 10 years ago by
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.
comment:16 follow-up: 17 Changed 10 years ago by
Component: | Dijit → Dijit - Form |
---|
comment:17 Changed 10 years ago by
Replying to bill: If possible, change the Milestone from future to 1.7.
comment:18 Changed 8 years ago by
Owner: | set to Douglas Hays |
---|---|
Status: | reopened → assigned |
Bulk update of unassigned Dijit - form tickets
comment:19 Changed 7 years ago by
Owner: | Douglas Hays deleted |
---|---|
Status: | assigned → open |
comment:20 Changed 5 years ago by
Milestone: | future → 1.11 |
---|---|
Owner: | set to bill |
Status: | open → assigned |
Bill, do you want to land this, or close it out?
comment:21 Changed 5 years ago by
Milestone: | 1.11 → 1.12 |
---|
Ok, after massive triage, ended up with about 80 tickets for 1.11 and 400 or so for 1.12. That's a bit unrealistic, so first I changed all 1.12 to 1.13 (with the plan to move some forward to the new 1.12. Now, I'm moving some of the 1.11 tickets that are less likely to get done this month without help to 1.11. Feel free to help out in January if you want to see this ticket land in 1.11.
comment:22 Changed 5 years ago by
Milestone: | 1.12 → 1.11 |
---|---|
Summary: | NumberTextBox: request for numeric value alignment in form textbox → NumberTextBox: right align numbers |
comment:23 Changed 5 years ago by
Summary: | NumberTextBox: right align numbers → [patch] NumberTextBox: right align numbers |
---|
comment:24 Changed 5 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
The folks making the lucid theme are actually working on this, or perhaps just changing the default to be right aligned.