Size of input and textarea

Discussion in 'HTML' started by Jens Müller, Oct 10, 2008.

  1. Jens Müller

    Jens Müller Guest

    Hello,

    I have two html tags <input> and <textarea> and want them to have the same
    width. I use size=x and rows=x respective but they are not the same width
    and, even if I chose the numbers that it fits, different browsers show them
    in idfferent sizes.

    Why is this? Would css be the best practice to achieve same witdth?

    Thanks!
     
    Jens Müller, Oct 10, 2008
    #1
    1. Advertising

  2. Jens Müller

    Neredbojias Guest

    On 10 Oct 2008, Jens Müller <> wrote:

    > Hello,
    >
    > I have two html tags <input> and <textarea> and want them to have the
    > same width. I use size=x and rows=x respective but they are not the
    > same width and, even if I chose the numbers that it fits, different
    > browsers show them in idfferent sizes.
    >
    > Why is this?


    Because you're not doing it right. I would tell you _how_ you're not
    doing it right but you didn't supply a url or even any data, did you?

    --
    Neredbojias
    http://www.neredbojias.org/
    Great Sights and Sounds
     
    Neredbojias, Oct 10, 2008
    #2
    1. Advertising

  3. Gazing into my crystal ball I observed Jens Müller <>
    writing in news:48ef5fbd$0$6588$-online.net:

    > Hello,
    >
    > I have two html tags <input> and <textarea> and want them to have the
    > same width. I use size=x and rows=x respective but they are not the
    > same width and, even if I chose the numbers that it fits, different
    > browsers show them in idfferent sizes.
    >
    > Why is this? Would css be the best practice to achieve same witdth?
    >
    > Thanks!
    >
    >


    Yes, CSS would be the way to go. Remember that HTML cannot constrain
    the number of characters in a textarea element, that can only be
    reliably done server side (although one can truncate input, and advise
    remaining characters with client side javascript).

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Oct 10, 2008
    #3
  4. Jens Müller

    Jens Müller Guest

    >> Why is this?
    >
    > Because you're not doing it right. I would tell you _how_ you're not
    > doing it right but you didn't supply a url or even any data, did you?


    What's this strange kind of answer?
    There exist only the hmtl attributes rows and size for textarea and input
    (type=text). Apparently, these are not renered in the same width when
    setting them to the same value, so I'm asking whetere one should use css to
    set the width or perhaps if there exists some other attribute like <textarea
    realsize="x">...
     
    Jens Müller, Oct 10, 2008
    #4
  5. On 2008-10-10, Jens Müller wrote:
    > Hello,
    >
    > I have two html tags <input> and <textarea> and want them to have the same
    > width. I use size=x and rows=x respective but they are not the same width
    > and, even if I chose the numbers that it fits, different browsers show them
    > in idfferent sizes.
    >
    > Why is this? Would css be the best practice to achieve same witdth?


    Yes, use CSS. (And provide a URL if you need more help.)

    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Chris F.A. Johnson, Oct 10, 2008
    #5
  6. Jens Müller wrote:
    >>> Why is this?

    >>
    >> Because you're not doing it right. I would tell you _how_ you're not
    >> doing it right but you didn't supply a url or even any data, did you?

    >
    > What's this strange kind of answer?
    > There exist only the hmtl attributes rows and size for textarea and
    > input (type=text). Apparently, these are not renered in the same width
    > when setting them to the same value, so I'm asking whetere one should
    > use css to set the width or perhaps if there exists some other attribute
    > like <textarea realsize="x">...


    It won't help to make stuff up. Why not look at the spec?

    http://www.w3.org/TR/html4/interact/forms.html#edef-TEXTAREA

    Now as the others of said, form controls have limited styling from
    browser to browser. What you are witnessing is that browsers reserve
    space for a scroll bar in TEXTAREAs, Gecko does show the scroll bar
    until needed whereas IE and Opera show a disabled one. Now SIZE is an
    optional attribute for INPUTs bit ROWS and COLS are not for TEXTAREAs.
    And a UA may use a proportional font for controls. Set your required
    attributes then override them in your stylesheet.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-language" content="en-us">

    <title>template</title>

    <style type="text/css">
    ..conformDammit {
    display: block; font: 1em normal, monospace; width: 15em;
    }
    </style>

    </head>
    <body>
    <form>
    <div>
    <input type="text" class="conformDammit">
    <textarea rows="5" cols="30" class="conformDammit"></textarea>
    </div>
    </form>
    </body>
    </html>






    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 10, 2008
    #6
  7. Jens Müller

    Jens Müller Guest

    Jens Müller, Oct 10, 2008
    #7
  8. Jens Müller

    freemont Guest

    On Fri, 10 Oct 2008 15:59:01 +0200, Jens Müller writ:

    > Hello,
    >
    > I have two html tags <input> and <textarea> and want them to have the
    > same width. I use size=x and rows=x respective but they are not the same
    > width and, even if I chose the numbers that it fits, different browsers
    > show them in idfferent sizes.
    >
    > Why is this? Would css be the best practice to achieve same witdth?
    >
    > Thanks!



    Something I stumbled upon that might interest you:

    <input type="text" name="name" id="name" value="" maxlength="50"
    style="width:100%">
    <textarea name="comments" id="comments" rows="0" cols="0"
    style="width:100%;height:10em">

    Just forget about the size attribute in <input> and use css to size it.
    The <textarea> requires rows and cols, but set them to zero and again
    size with css. Validates fine and seems to work cross-browser.

    --
    "Because all you of Earth are idiots!"
    ¯`·.¸¸.·´¯`·-> freemont© <-·´¯`·.¸¸.·´¯
     
    freemont, Oct 12, 2008
    #8
  9. Jens Müller

    Bergamot Guest

    freemont wrote:
    >
    > Just forget about the size attribute in <input> and use css to size it.
    > The <textarea> requires rows and cols, but set them to zero and again
    > size with css.


    You forget that CSS is supposed to be optional. While the size attribute
    is optional for input elements, there is no reason to set rows/cols to 0
    for textareas, nor should they be. You can still use CSS to fine tune
    sizes, but the cols/rows attributes should be reasonable fall-back values.

    > Validates fine and seems to work cross-browser.


    Did you try that 0 cols and rows in Lynx, or with CSS disabled?

    --
    Berg
     
    Bergamot, Oct 13, 2008
    #9
  10. Jens Müller

    freemont Guest

    On Sun, 12 Oct 2008 23:18:21 -0500, Bergamot writ:

    > You forget that CSS is supposed to be optional. While the size attribute
    > is optional for input elements, there is no reason to set rows/cols to 0
    > for textareas, nor should they be. You can still use CSS to fine tune
    > sizes, but the cols/rows attributes should be reasonable fall-back
    > values.


    Good point! Thanks.

    --
    "Because all you of Earth are idiots!"
    ¯`·.¸¸.·´¯`·-> freemont© <-·´¯`·.¸¸.·´¯
     
    freemont, Oct 13, 2008
    #10
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Anders S. Clausen
    Replies:
    5
    Views:
    946
    Jukka K. Korpela
    Nov 24, 2003
  2. Jason Cavett

    Preferred Size, Minimum Size, Size

    Jason Cavett, May 23, 2008, in forum: Java
    Replies:
    5
    Views:
    12,651
    Michael Jung
    May 25, 2008
  3. Augustus
    Replies:
    1
    Views:
    371
    Ken Schaefer
    Sep 10, 2003
  4. Textarea Inside of a textarea

    , Feb 4, 2006, in forum: ASP General
    Replies:
    6
    Views:
    344
    Anthony Jones
    Feb 5, 2006
  5. Replies:
    1
    Views:
    335
    Bart Van der Donck
    Jul 4, 2007
Loading...

Share This Page