By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,645 Members | 1,226 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,645 IT Pros & Developers. It's quick & easy.

right aligned input field

P: n/a
Hi,

I'm using a form with a bunch of input tags to enter numbers. Is there any
way to make the input field right adjusted, so that the numbers align at the
right side instead of the left? Even plain html doesn't work, could java
script or something else help?

Bye
Markus
Jul 20 '05 #1
Share this Question
Share on Google+
11 Replies


P: n/a


Markus Mueller wrote:
I'm using a form with a bunch of input tags to enter numbers. Is there any
way to make the input field right adjusted, so that the numbers align at the
right side instead of the left? Even plain html doesn't work, could java
script or something else help?


Try CSS
<style type="text/css">
@import url(styles.css);
</style>
with the file styles.css containing
input.rightAligned {
text-align: right;
}
and then
<input type="text" class="rightAligned">
--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #2

P: n/a
On Tue, 18 May 2004, Markus Mueller wrote:
X-Newsreader: Microsoft Outlook Express 5.50.4927.1200
Please visit <http://piology.org/news/oe-erste-schritte.html>
I'm using a form with a bunch of input tags to enter numbers. Is there any
way to make the input field right adjusted, so that the numbers align at the
right side instead of the left?


DIR="RTL"
For example <http://www.google.co.il/>

--
Nicht's geht mehr ohne Apostroph.
Jul 20 '05 #3

P: n/a
Martin Honnen wrote:
Try CSS
<style type="text/css">
@import url(styles.css);
</style>
with the file styles.css containing
input.rightAligned {
text-align: right;
}
and then
<input type="text" class="rightAligned">


True, that will often produce the desired effect. However, it is worth
mentioning that, in fact, it should not. According to the CSS2
Specification [1], the /text-align/ property applies only to block-level
elements, which /<input>/ is not. I do not know how or if CSS3 will
address this matter.

[1] http://www.w3.org/TR/REC-CSS2/text.html#alignment-prop

Regards,

--
Ney André de Mello Zunino
Jul 20 '05 #4

P: n/a
Andreas Prilop <nh******@rrzn-user.uni-hannover.de> wrote:
I'm using a form with a bunch of input tags to enter numbers. Is
there any way to make the input field right adjusted, so that the
numbers align at the right side instead of the left?


DIR="RTL"


Isn't that a bit tricky? It's based on the effect that dir="rtl"
implicitly sets align="right", which you could set too but doesn't quite
work (and is obscurely defined) _and_ on the fact that digits have
inherent directionality so that they won't be written right to left.
I'm not that familiar with directionality, and I don't know how well it
has been implemented, but if I try
<input dir="rtl">
and type first "-", then "1", the field contains "1-". Similarly,
"." followed by "1" (meant to mean ".1", i.e. "0.1") produces "1.".

So I would use
<input style="text-align: right; display: block">
together with precautions that deal with the block presentation, as
discussed at http://www.cs.tut.fi/~jkorpela/forms/present.html#align

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
Jul 20 '05 #5

P: n/a
On Tue, 18 May 2004, Jukka K. Korpela wrote:
DIR="RTL"
Isn't that a bit tricky?


Yes.
So I would use
<input style="text-align: right; display: block">
together with precautions that deal with the block presentation, as
discussed at http://www.cs.tut.fi/~jkorpela/forms/present.html#align


Agree!

--
Top-posting.
What's the most irritating thing on Usenet?

Jul 20 '05 #6

P: n/a
/Jukka K. Korpela/:
So I would use
<input style="text-align: right; display: block">
together with precautions that deal with the block presentation, as
discussed at http://www.cs.tut.fi/~jkorpela/forms/present.html#align


Why 'display: block'? Isn't the INPUT element already an 'inline-block'?

--
Stanimir
Jul 20 '05 #7

P: n/a
Stanimir Stamenkov <s7****@netscape.net> wrote:
Why 'display: block'? Isn't the INPUT element already an
'inline-block'?


Who knows? There is no _normative_ specification of the rendering of
INPUT elements in CSS terms, just a vague "sample style sheet". But
in any case, inline-block is not a CSS 2 concept at all, and the sample
style sheet http://www.w3.org/TR/REC-CSS2/sample.html assigns no display
value to it, hence defaulting to display: inline, which implies that
text-align does not apply. Setting display: block fixes this.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Jul 20 '05 #8

P: n/a
/Jukka K. Korpela/:
Stanimir Stamenkov <s7****@netscape.net> wrote:
Why 'display: block'? Isn't the INPUT element already an
'inline-block'?


Who knows? There is no _normative_ specification of the rendering of
INPUT elements in CSS terms, just a vague "sample style sheet". But
in any case, inline-block is not a CSS 2 concept at all, and the sample
style sheet http://www.w3.org/TR/REC-CSS2/sample.html assigns no display
value to it, hence defaulting to display: inline, which implies that
text-align does not apply. Setting display: block fixes this.


As you mention, CSS2 doesn't specify how replaced elements are
affected by the style rules, so I don't think setting 'display:
block' fixes anything, really. IIRC the later development on CSS
defines replaced elements as blocks and setting 'display: inline' or
'display: inline-block' on them is effectively the same. But I don't
recall if it is determined how other properties would affect
replaced elements (their content) and every style applied would be
just a wild guess.

--
Stanimir
Jul 20 '05 #9

P: n/a
Stanimir Stamenkov <s7****@netscape.net> wrote:
As you mention, CSS2 doesn't specify how replaced elements are
affected by the style rules, so I don't think setting 'display:
block' fixes anything, really.


So it seems, in practice - IE, Opera, Firefox all right-align the field
content, when I use text-align: right, no matter whether there's
display: block too.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Jul 20 '05 #10

P: n/a
On Tue, 18 May 2004, Jukka K. Korpela wrote:
I'm not that familiar with directionality, and I don't know how well it
has been implemented, but if I try
<input dir="rtl">
and type first "-", then "1", the field contains "1-".
Internet Explorer, I presume? So this behaviour depends on the browser.
Similarly,
"." followed by "1" (meant to mean ".1", i.e. "0.1") produces "1.".


At least one digit _before_ and _after_ the decimal sign is required.
(ISO 31, ISO 1000)

--
Top-posting.
What's the most irritating thing on Usenet?

Jul 20 '05 #11

P: n/a
Andreas Prilop <nh******@rrzn-user.uni-hannover.de> wrote:
On Tue, 18 May 2004, Jukka K. Korpela wrote:
I'm not that familiar with directionality, and I don't know how well
it has been implemented, but if I try
<input dir="rtl">
and type first "-", then "1", the field contains "1-".


Internet Explorer, I presume? So this behaviour depends on the
browser.


Yes. I must admit I'm even more confused than before, but surely this
means that dir="rtl" isn't the right way to right align! (Maybe some HTML
zealots would prefer it since it's "pure HTML" and does not need CSS.)
Similarly,
"." followed by "1" (meant to mean ".1", i.e. "0.1") produces "1.".


At least one digit _before_ and _after_ the decimal sign is required.
(ISO 31, ISO 1000)


In some notation systems (which also prefer the decimal _comma_ to
decimal point if I remember correctly), but this is about something that
operates in a situation where we only know that it deals with "numbers"
in an input field. The application might restrict numbers to unsigned
integers, but the behavior would still be surprising and most confusing
to a user who tries to enter numbers by some intuitive (to him) rules.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Jul 20 '05 #12

This discussion thread is closed

Replies have been disabled for this discussion.