Responsive input size grows when inside input-prepend with Bootstrap - html

Question

When I resize this fiddle, the input box gets larger when I shrink the screen. Unfortunately on the iPhone, it's going off the screen in my app.
Here is the fiddle: http://jsfiddle.net/v6Bhx/5/embedded/result/ and here is the code:
<div class="row-fluid">
<div class="span6">
<table width="500">
<tr>
<td>
<div class="input-prepend">
<span class="add-on">$</span>
<input type="text" name="fee" value="" class="span6" />
</div>
</td>
</tr>
</table>
</div>
<div class="span6">Test</div>
</div>
Also yes, I realize I am using tables. I am not doing this to format data, it is actually being used for tabular data which happens to have input boxes in it.

Answer 1

Either set a width on slider :
<input style="width:125px;" type="text" name="fee" value="" class="span6" />
or use css
.span6 { width: 125px; }
The reason is the table is changing row widths on page resize

Answer 2

My suggestion is to use table width="100%" .
<div class="row-fluid">
<div class="span6">
<table width="100%">
<tr>
<td>
<div class="input-prepend"> <span class="add-on">$</span>
<input type="text" name="fee" value="" class="span6"
/>
</div>
</td>
</tr>
</table>
</div>
<div span="6">Test</div>
</div>

Answer 3

Setting the table width # 500px will likely cause a problem as the viewpoint shrinks to mobile size. Try removing the table width and see what happens.
Update
I can't picture exactly how you want the final page and table to look, but here are a few additional points you could check.
Regarding the iPhone display issue, make sure that in the head of your page you have:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I think that specifying a table width of 100% will be invalid HTML5. I doubt that this is the source of your problem, but try something like this in your CSS:
.span6 table{
width:100%;
}
I can see that having the form with an input prepend inside a table is going to be a challenge. If there is no way around this, you have a nesting problem at the moment -- the input.span6 is actually nested inside the another span6 column.
In general, the HTML for a nested grid with fluid rows is:
<div class="row-fluid">
<div class="span6">
<div class="row-fluid"> <!-- start nested grid -->
<div class="span12">
<!-- Form and table details here -->
</div> <!-- end nested span -->
</div> <!-- end nested row -->
</div> <!-- end span6 -->
<div class="span6">
test
</div>
</div>
See the fluid nesting section on http://twitter.github.com/bootstrap/scaffolding.html#gridSystem for full details.
Good luck!