css - Group addon taking up too much space in bootstrap table -
when add .group-addon
element inside bootstrap .table
, other elements not given enough space, , group-addon input takes far room.
<h2>only 1 bully, group-addon</h2> <table class="table"> <tbody> <tr> <td> <div class="input-group"> <input id="cool" class="form-control"> </div> </td> <td> <div class="input-group"> <input id="cool" class="form-control"> <div class="input-group-addon">x</div> </div> </td> <td>pushed around...</td> <td>being bullied...</td> <td>by group addons...</td> </tr> </tbody> </table> <h2>two bullying group-addons</h2> <table class="table"> <tbody> <tr> <td> <div class="input-group"> <div class="input-group-addon">x</div> <input id="cool" class="form-control"> </div> </td> <td> <div class="input-group"> <input id="cool" class="form-control"> <div class="input-group-addon">x</div> </div> </td> <td>pushed around...</td> <td>being bullied...</td> <td>by group addons...</td> </tr> </tbody> </table> <h2>no bullies</h2> <table class="table"> <tbody> <tr> <td> <div class="input-group"> <input id="cool" class="form-control"> </div> </td> <td> <div class="input-group"> <input id="cool" class="form-control"> </div> </td> <td>pushed around...</td> <td>being bullied...</td> <td>by group addons...</td> </tr> </tbody> </table> <div class="alert alert-info">when there no group-addon inside table class table, spacing looks reasonable, single group-addon ruins all</div>
http://jsfiddle.net/billymoon/ntm2q/
how should use group-addons inside bootstrap tables without them taking space?
try in less / css:
.input-group-addon { width:auto; }
Comments
Post a Comment