Opened 4 years ago

Last modified 3 months ago

#10377 open enhancement

NumberTextBox: request for numeric value alignment in form textbox

Reported by: richso Owned by:
Priority: high Milestone: future
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 3 years ago.
screenshot of arrow alignment problem on IE6 when padding added

Download all attachments as: .zip

Change History (20)

comment:1 Changed 4 years ago by bill

  • Component changed from General to Dijit
  • Keywords lucid added; textbox numeric alignment removed
  • Milestone changed from 1.4 to 1.5
  • Owner anonymous deleted
  • Summary changed from request for numeric value alignment in form textbox to NumberTextBox: 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 4 years ago by bill

  • Keywords claro added; lucid removed

comment:3 Changed 4 years ago by 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">

comment:4 Changed 4 years ago by jbondc

*Starting in trunk / 1.5 realease*

comment:5 Changed 4 years ago by peller

  • Milestone changed from 1.5 to 1.6

comment:6 Changed 3 years ago by bill

  • Resolution set to fixed
  • Status changed from new to 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 3 years ago by iCanDo

  • Resolution fixed deleted
  • Status changed from closed to 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 3 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 3 years ago by bill

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

comment:10 follow-up: Changed 3 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 3 years ago by bill

  • Milestone changed from 1.6 to future

comment:12 in reply to: ↑ 10 Changed 3 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 3 years ago by doughays

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

Changed 3 years ago by bill

screenshot of arrow alignment problem on IE6 when padding added

comment:14 follow-up: Changed 3 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 3 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 follow-up: Changed 3 years ago by bill

  • Component changed from Dijit to Dijit - Form

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

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

comment:18 Changed 9 months ago by bill

  • Owner set to doughays
  • Status changed from reopened to assigned

Bulk update of unassigned Dijit - form tickets

comment:19 Changed 3 months ago by doughays

  • Owner doughays deleted
  • Status changed from assigned to open
Note: See TracTickets for help on using tickets.