Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Mar 2004
    Posts
    130
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stretch to fit inputs

    Hey,

    Do you know how gmail's textarea stretches to accomodate text?

    I want my inputs to behave like that.

    I tried using css:
    fit: fill;

    But that didn't work. Not even in Mozilla.

    How do I do this?

    In other words
    Code:
    <input type="text" name="name_first">
    <input type="text" name="name_middle">
    <input type="text" name="name_last">
    I want the fields to line up like this.
    Code:
    +---------+ +---+ +-------+
    | Garrett | | S | | Smith |
    +---------+ +---+ +-------+
    and if the user changes "name_middle" to "Sean", then the middle field should expand.
    Code:
    +---------+ +------+ +-------+
    | Garrett | | Sean | | Smith |
    +---------+ +------+ +-------+
    I think I'll need to know the width of the input's value. I think that's actually possible in IE's Range.

  • #2
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    Code:
    input.select();
    input.style.width=input.createTextRange().boundingWidth;

  • #3
    Regular Coder
    Join Date
    Mar 2004
    Posts
    130
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I ended up using the span.

    The range's boundingWidth is only going to work in IE, AFAIK. I did not test boundingWidth in Mozilla, but it is not documented and non-standard, so I assume it is not supported.

    I'm going to try using a span, then setting the width of the input to the offsetWidth of the span.

    It sounds like a pain, but I need the span element to have the same value as the input (as part of the functional spec).

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    What about (not perfect but acceptable):

    <input type="text" size="1" onkeyup="this.size=this.value.length>0?this.value.length:1">
    Last edited by Kor; 07-24-2006 at 11:31 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,950
    Thanks
    0
    Thanked 236 Times in 233 Posts
    This works although in IE only.
    Code:
    <input type="text" size="3" style="overflow:visible" />


  •  

    Posting Permissions

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