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
    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
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    This works although in IE only.
    Code:
    <input type="text" size="3" style="overflow:visible" />
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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