right aligned input field

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Markus Mueller

    right aligned input field

    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


  • Martin Honnen

    #2
    Re: right aligned input field



    Markus Mueller wrote:
    [color=blue]
    > 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?[/color]

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

    Martin Honnen


    Comment

    • Andreas Prilop

      #3
      Re: right aligned input field

      On Tue, 18 May 2004, Markus Mueller wrote:
      [color=blue]
      > X-Newsreader: Microsoft Outlook Express 5.50.4927.1200[/color]

      Please visit <http://piology.org/news/oe-erste-schritte.html>
      [color=blue]
      > 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?[/color]

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

      --
      Nicht's geht mehr ohne Apostroph.


      Comment

      • Ney André de Mello Zunino

        #4
        Re: right aligned input field

        Martin Honnen wrote:
        [color=blue]
        > Try CSS
        > <style type="text/css">
        > @import url(styles.css) ;
        > </style>
        > with the file styles.css containing
        > input.rightAlig ned {
        > text-align: right;
        > }
        > and then
        > <input type="text" class="rightAli gned">[/color]

        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

        Comment

        • Jukka K. Korpela

          #5
          Re: right aligned input field

          Andreas Prilop <nhtcapri@rrz n-user.uni-hannover.de> wrote:
          [color=blue][color=green]
          >> 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?[/color]
          >
          > DIR="RTL"[/color]

          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


          Comment

          • Andreas Prilop

            #6
            Re: right aligned input field

            On Tue, 18 May 2004, Jukka K. Korpela wrote:
            [color=blue][color=green]
            >> DIR="RTL"[/color]
            >
            > Isn't that a bit tricky?[/color]

            Yes.
            [color=blue]
            > 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[/color]

            Agree!

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

            Comment

            • Stanimir Stamenkov

              #7
              Re: right aligned input field

              /Jukka K. Korpela/:
              [color=blue]
              > 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[/color]

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

              --
              Stanimir

              Comment

              • Jukka K. Korpela

                #8
                Re: right aligned input field

                Stanimir Stamenkov <s7an10@netscap e.net> wrote:
                [color=blue]
                > Why 'display: block'? Isn't the INPUT element already an
                > 'inline-block'?[/color]

                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

                Comment

                • Stanimir Stamenkov

                  #9
                  Re: right aligned input field

                  /Jukka K. Korpela/:[color=blue]
                  > Stanimir Stamenkov <s7an10@netscap e.net> wrote:
                  >[color=green]
                  >> Why 'display: block'? Isn't the INPUT element already an
                  >> 'inline-block'?[/color]
                  >
                  > 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.[/color]

                  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

                  Comment

                  • Jukka K. Korpela

                    #10
                    Re: right aligned input field

                    Stanimir Stamenkov <s7an10@netscap e.net> wrote:
                    [color=blue]
                    > 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.[/color]

                    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

                    Comment

                    • Andreas Prilop

                      #11
                      Re: right aligned input field

                      On Tue, 18 May 2004, Jukka K. Korpela wrote:
                      [color=blue]
                      > 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-".[/color]

                      Internet Explorer, I presume? So this behaviour depends on the browser.
                      [color=blue]
                      > Similarly,
                      > "." followed by "1" (meant to mean ".1", i.e. "0.1") produces "1.".[/color]

                      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?

                      Comment

                      • Jukka K. Korpela

                        #12
                        Re: right aligned input field

                        Andreas Prilop <nhtcapri@rrz n-user.uni-hannover.de> wrote:
                        [color=blue]
                        > On Tue, 18 May 2004, Jukka K. Korpela wrote:
                        >[color=green]
                        >> 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-".[/color]
                        >
                        > Internet Explorer, I presume? So this behaviour depends on the
                        > browser.[/color]

                        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.)
                        [color=blue][color=green]
                        >> Similarly,
                        >> "." followed by "1" (meant to mean ".1", i.e. "0.1") produces "1.".[/color]
                        >
                        > At least one digit _before_ and _after_ the decimal sign is required.
                        > (ISO 31, ISO 1000)[/color]

                        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

                        Comment

                        Working...