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> 

group-addon

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

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -