Opened 10 years ago

Closed 4 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)

ie6PaddedSpinner.gif (2.6 KB) - added by bill 8 years ago.
screenshot of arrow alignment problem on IE6 when padding added

Download all attachments as: .zip

Change History (25)

comment:1 Changed 10 years ago by bill

Component: GeneralDijit
Keywords: lucid added; textbox numeric alignment removed
Milestone: 1.41.5
Owner: anonymous deleted
Summary: request for numeric value alignment in form textboxNumberTextBox: request for numeric value alignment in form textbox

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

comment:2 Changed 9 years ago by bill

Keywords: claro added; lucid removed

comment:3 Changed 9 years ago by Jonathan Bond-Caron

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:4 Changed 9 years ago by Jonathan Bond-Caron

*Starting in trunk / 1.5 realease*

comment:5 Changed 9 years ago by Adam Peller

Milestone: 1.51.6

comment:6 Changed 8 years ago by bill

Resolution: fixed
Status: newclosed

(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 8 years ago by iCanDo

Resolution: fixed
Status: closedreopened

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 8 years ago by 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.

comment:9 Changed 8 years ago by bill

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

comment:10 Changed 8 years ago by 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.

comment:11 Changed 8 years ago by bill

Milestone: 1.6future

comment:12 in reply to:  10 Changed 8 years ago by 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.

comment:13 Changed 8 years ago by Douglas Hays

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

Changed 8 years ago by bill

Attachment: ie6PaddedSpinner.gif added

screenshot of arrow alignment problem on IE6 when padding added

comment:14 Changed 8 years ago by 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.)

comment:15 in reply to:  14 Changed 8 years ago by 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.

comment:16 Changed 8 years ago by bill

Component: DijitDijit - Form

comment:17 in reply to:  16 Changed 8 years ago by iCanDo

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

comment:18 Changed 6 years ago by bill

Owner: set to Douglas Hays
Status: reopenedassigned

Bulk update of unassigned Dijit - form tickets

comment:19 Changed 5 years ago by Douglas Hays

Owner: Douglas Hays deleted
Status: assignedopen

comment:20 Changed 4 years ago by dylan

Milestone: future1.11
Owner: set to bill
Status: openassigned

Bill, do you want to land this, or close it out?

comment:21 Changed 4 years ago by dylan

Milestone: 1.111.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 4 years ago by bill

Milestone: 1.121.11
Summary: NumberTextBox: request for numeric value alignment in form textboxNumberTextBox: right align numbers

comment:23 Changed 4 years ago by dylan

Summary: NumberTextBox: right align numbers[patch] NumberTextBox: right align numbers

comment:24 Changed 4 years ago by Bill Keese <bill@…>

Resolution: fixed
Status: assignedclosed

In a5663e00a561fde1fd6112541219a39dea579d34/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 
Note: See TracTickets for help on using tickets.