Bootstrap responsive table with form input min width
Solution 1
The default css of .form-control forces this behavior, so you need to change the css of your input field like:
input.form-control {
width: auto;
}
Solution 2
Column width will be dynamic as user may input any length value! Wrap input fields in a div, set div width dynamically using JavaScript:
<tr>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" size="80" value="Some Long Name Here"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="13-Jul-2015"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="$12355.12"/></div></td>
<td>
<select class="form-control">
<option>Monthly</option>
<option>Yearly</option>
</select>
</td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="another long value"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="some val"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="some val"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="some val"/></div></td>
<td>$505.79</td>
</tr>
And the JS function:
<script>
function updateWidth(textbox) {
$(textbox).parent().css("width",(textbox.value.length + 2) + "em");
}
</script>
Solution 3
To add on to @katwhocodes, if you are using Bootstrap 4,
You can add w-auto
class to the <input>
.
https://getbootstrap.com/docs/4.4/utilities/sizing/#relative-to-the-parent
robarelli
Updated on May 04, 2020Comments
-
robarelli almost 4 years
I am trying to create a responsive table that contains form inputs for several columns. From what I understand, the responsive tables shrink until its columns can't go any further, then it adds a scroller. However, the columns shrink to the point where I can't see the values in the input field so I need a way to impose a minimum width on these columns instead of having it determined by the column header text length.
I have tried adding min-width:"10%" or "150px" to all the elements in the column, but that didn't work. Here is my setup:
<form class="form-horizontal"> <div class="table-responsive"> <table class="table table-bordered table-striped table-highlight"> <thead> <th>Name</th> <th>Date</th> <th>Cost</th> <th>Billing Type</th> <th>Tax</th> <th>Other Col</th> <th>Other Col</th> <th>Other Col</th> <th>Total</th> </thead> <tbody> <tr> <td><input type="text" class="form-control" value="Some Long Name Here"/></td> <td><input type="text" class="form-control" value="13-Jul-2015"/></td> <td><input type="text" class="form-control" value="$12355.12"/></td> <td> <select class="form-control"> <option>Monthly</option> <option>Yearly</option> </select> </td> <td><input type="text" class="form-control" value="another long value"/></td> <td><input type="text" class="form-control" value="some val"/></td> <td><input type="text" class="form-control" value="some val"/></td> <td><input type="text" class="form-control" value="some val"/></td> <td>$505.79</td> </tr> </tbody> </table> </div> </form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <form class="form-horizontal"> <div class="table-responsive"> <table class="table table-bordered table-striped table-highlight"> <thead> <th>Name</th> <th>Date</th> <th>Cost</th> <th>Billing Type</th> <th>Tax</th> <th>Other Col</th> <th>Other Col</th> <th>Other Col</th> <th>Total</th> </thead> <tbody> <tr> <td><input type="text" class="form-control" value="Some Long Name Here" /></td> <td><input type="text" class="form-control" value="13-Jul-2015" /></td> <td><input type="text" class="form-control" value="$12355.12" /></td> <td> <select class="form-control"> <option>Monthly</option> <option>Yearly</option> </select> </td> <td><input type="text" class="form-control" value="another long value" /></td> <td><input type="text" class="form-control" value="some val" /></td> <td><input type="text" class="form-control" value="some val" /></td> <td><input type="text" class="form-control" value="some val" /></td> <td>$505.79</td> </tr> </tbody> </table> </div> </form>
As you can see, some field values are cut off when the table shrinks. Any help is appreciated.
Edit: I would like to continue using tables due to some legacy code preservation. However, I am open to any solution if need be.
-
robarelli almost 9 yearsThis did the trick, thanks! Simple implementation. I was able to also modify it to use a specific width or use min-width instead, etc...
-
Marc Roussel almost 6 yearsClever. Thank you