How To Define Width Of Field In Form?

Discussion in 'CSS' started by digitalpoint, Jun 7, 2004.

0
  1. #1
    I know you can use the normal size attribute, but is there any way (with CSS maybe) to define it a little more exact (for example with a px number? The reason I ask is it's really ugly when you have one long field, with two smaller ones on the next row, but no matter what size values you use, they can never be the same total width.
     
    digitalpoint, Jun 7, 2004 IP
  2. rocky

    rocky Guest

    Messages:
    23
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    try adding this to the tag:

    style="width: 200px;"
     
    rocky, Jun 7, 2004 IP
  3. Razvan Pop

    Razvan Pop Member

    Messages:
    43
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #3
    input {
    width: 200px;
    }

    Will make all your <input /> fields 200px wide.

    textarea {
    width: 200px;
    }

    Will make all your <textarea></textarea> fields 200px wide.
     
    Razvan Pop, Jun 7, 2004 IP
  4. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,334
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #4
    Awesome, that's exactly what I was looking for, thanks. :)
     
    digitalpoint, Jun 7, 2004 IP
  5. Razvan Pop

    Razvan Pop Member

    Messages:
    43
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #5
    MORE:

    you have the CSS for input and textarea. Let's say you want the buttons look different.

    <input type="submit" value="submit" class="buttons" />

    the CSS:

    input.buttons {
    width: 100px;
    background-color: red;
    }
     
    Razvan Pop, Jun 7, 2004 IP
  6. rfuess

    rfuess Guest

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Although the "size" attribute may not get the precision of the "width" style attribute, remember that it is not supported in some older browsers.

    In these cases, it will use the default size, regardless of the width you put in the style tag.

    However, most browsers nowdays support this.

    Robert Fuess
    Spiderweb Logic
     
    rfuess, Jun 11, 2004 IP
  7. CollectionDX

    CollectionDX Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Related to this - is there any way to put a maxlength on a multi-line textarea? I know you can for a regular form field.

    Thanks.
     
    CollectionDX, Jun 14, 2004 IP
  8. rfuess

    rfuess Guest

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Perhaps wire an "onchange" javascript function . . .

    When the text changes
    1) check the length
    2) if > max, truncate to max
    3) put cursor at end of field
     
    rfuess, Jun 16, 2004 IP
  9. mykoleary

    mykoleary Peon

    Messages:
    64
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #9
    You're better off popping an alert saying the limit and how long the field is, the person may want to cut out text from the beginning to fit the limit as opposed to the text you arbitrarily chopped off of the end.
     
    mykoleary, Oct 9, 2004 IP