SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Input Boxes

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    MN
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Input Boxes

    Okay, here is the deal... I have an input box that is in a table of variable width (it is a % table). I want the input box to fill the whole table, so I did the following code:

    Code:
    <input type="text" value="blah" readonly="readonly" style="background: transparent; width: 100%; padding-left: 3px;">
    This works perfectly so long the valu is short. The problem is when the value is longer, like lets say 100 characters. What happens is that that the text box spans the entire 100 characters, when I want it to be only as wide as the table.

    My question is, how do I make it so instead of expanding, it does would a normal input box would do and let the user scroll over?

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    MN
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, it should be noted, it does the desired behavior in firefox, but not in IE. I am sure css can help here, can't it?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I don't think this will be much use but you could wrap it in another div and set the overflow. Of course you will get nasty scrollbars when the text is too long.

    Code:
    <div style="width:100%;overflow:scroll"><input type="text" value="blahkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk" readonly="readonly" style="background: transparent; width: 100%;"></div>
    (inline styles for example only).

    Paul

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    MN
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a fix. What I had to do was give the field a small default value and then once the page loads, use javascript to change its value to the longer one. This will keep the box the right size.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    field a small default value and then once the page loads, use javascript to change its value to the longer one
    Ahh - there you go

    BTW what's Javascript

    (remember to test that the input is still functional if js is switched off etc.)

    Paul


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
  •