SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    input text box size

    Hello,
    When I add a text field to a form and set the size and maxlength to, let's say 10, the resulting input appears large enough to hold more like 14 characters or so even though input stops at 10. How can I shrink the input so that it appears sized correctly? Using IE6 on PC.

    Thanks,
    David

  2. #2
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I add a text field to a form and set the size and maxlength to, let's say 10, the resulting input appears large enough to hold more like 14 characters or so
    Would that be ten lower-case "L", or ten upper case "W"? Let's compare:

    llllllllll
    WWWWWWWWWW

    Hmm. In any proportional font, that's a big difference. In the Arial font I'm seeing here, the ten "L"s are about equal to TWO "W"s.

    Q: How does the browser know what the user's going to enter?

    A: It doesn't, and can't.

    Different browsers handle this in different ways. Netscape 4 gives you boxes that are really big in comparison to other browsers. IE gives something that's about right for 10 copies of a "medium-sized" letter, like "a". Mozilla does different things depending which rendering mode it's in. I have no idea what Opera, iCab, Omniweb, Konquerer [etc, etc] do.

    There is no standard way of calculating these widths. Test your page in the browsers you care about, to make sure it's not a complete disaster, and live with it.

  3. #3
    SitePoint Guru Husain's Avatar
    Join Date
    Sep 2001
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can control the size of the text box using the size property.
    Code:
    <input name="textfield" type="text" size="10" maxlength="10">
    You can adjust the size accordingly.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •