SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Shrink wrapping a textbox

    Is it possible to shrink wrap a input type="text" element to its text? With CSS? Or scripting?

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What?

  3. #3
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By shrink wrap, I mean that the element is just large enough to encompass its text contents. For example, spans shrink wrap around any text within them.

    However, input type="text" and textarea elements don't. I was wondering if there was any way to make them shrink wrap.

  4. #4
    SitePoint Zealot
    Join Date
    Sep 2000
    Location
    England
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'd probably have to write a javascript checker that re-sets the width and height of the input after each character is written or the focus moves out of the input. You'd be hard pressed to get it working perfectly though, unless you want to spend an inordinate amount of time checking which letters are used and adjusting for their widths.

    In other words, unless someone else here has a simpler solution I can't see it being worth it personally.

  5. #5
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Monospace font letters are all the same width, so as long as you use one of them you shouldn't have a problem with the Javascript resizing.

    But yeah - what would be the point?


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
  •