Input Boxes

[tabula_rasa]

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:

<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?

[tabula_rasa]

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?

[Paul O'B]

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.

<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

[tabula_rasa]

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.

[Paul O'B]

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