Text field text alignment

K

Karsten Wutzke

Hi all!

How do you right align text within a text field (<input ...> tag) for
decimal/floating point values??

Sorry for this short q, tried many things that don't seem to work.

align="right"
halign="right"

....don't work.

Karsten

PS: is it possible to align at the decimal point?
 
J

Jonathan N. Little

Karsten said:
Hi all!

How do you right align text within a text field (<input ...> tag) for
decimal/floating point values??

Sorry for this short q, tried many things that don't seem to work.

align="right"
halign="right"

...don't work.

In stylesheet:
/* make right aligned */
..toright { text-align: right; }


HTML:
<input name="test" type="text" size="10" class="toright" value="sample">


PS: is it possible to align at the decimal point?

Not on INPUT elements, on table cells but I believe browser support it
spotty
 
J

Jukka K. Korpela

Scripsit Jonathan N. Little:
Not on INPUT elements, on table cells but I believe browser support it
spotty

By the CSS 2.0 specification, you can use text-align: ".", and you could
even use the display property to turn input elements into cells in CSS sense
(i.e., as elements to be rendered as table cells). But string values for
text-align haven't been implemented at all, and the drafts for CSS 2.1 (work
in progress) have this feature removed.

For table cells, there are somewhat contrived techniques to create the
impression of aligning at the decimal point, and they work part of the time.
I guess it would be possible to do something similar with input elements,
using JavaScript to insert special space characters as needed, but it would
not work reliably at all in any open environment.
 
J

Jonathan N. Little

Jukka said:
Scripsit Jonathan N. Little:


By the CSS 2.0 specification, you can use text-align: ".", and you could
even use the display property to turn input elements into cells in CSS
sense (i.e., as elements to be rendered as table cells). But string
values for text-align haven't been implemented at all, and the drafts
for CSS 2.1 (work in progress) have this feature removed.

For table cells, there are somewhat contrived techniques to create the
impression of aligning at the decimal point, and they work part of the
time. I guess it would be possible to do something similar with input
elements, using JavaScript to insert special space characters as needed,
but it would not work reliably at all in any open environment.
I thought I had seen it somewhere but could not find it. Moot though,
because I haven't a browser that supports it.

For OP your best solution is to style for right alignment and make sure
your font is monospace "fix-width" and has a consistent number of
decimal digits.
 
B

Bergamot

Jonathan said:
.toright { text-align: right; }

<input name="test" type="text" size="10" class="toright" value="sample">

You should use a class name that describes the content, not the style.
In the OP's case, class="amount" or something else indicative of numeric
content would be more suitable.
 
J

Jonathan N. Little

Bergamot said:
You should use a class name that describes the content, not the style.
In the OP's case, class="amount" or something else indicative of numeric
content would be more suitable.
Normally *I* would, like I have a class "bucks" for formating my
currency cells, but A) I did not know what the OP's purpose for his
right aligned cells since he did not supply a URL and B) If a made one
up, it might confuse the OP so I chose a very clear demo label
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top