BraCa
BraCa

Reputation: 351

Bootstrap grid with one column auto width

I'm using bootstrap 3 and I'm trying to make a list of items, where each row has 4 columns.. I've tried to use the bs3 grid system, but it doesn't fit all my requirements (or at least I can't make it work), since one of the columns need to use all the available space..

Example:

 _____________________________________________________________________________
|                                                                             |
|                                   Container                                 |
|Checkbox| Name (130px)| Message                                        | Date|
|Checkbox| Name (130px)| Message adasdsadsadsadsadsadasaaaaaaaaaaaaa    | Date|
|Checkbox| Name (130px)| Message adsadsadsadsadsadsadsaaaaaaaaaaaaaa... | Date|
|Checkbox| Name (130px)| Message                                        | Date|
|Checkbox| Name (130px)| Message                                        | Date|
|....                                                                         |
|_____________________________________________________________________________|

Basically, the date column should always be on the right, and the message column should use all the available width, and if the message is bigger than the available space, it should be truncated (or the overflow hidden)

Thanks

Upvotes: 4

Views: 11185

Answers (2)

Abhitalks
Abhitalks

Reputation: 28437

You could wrap your divs in one large column and then set display: table-cell on those:

Something like the snippet below.

Fiddle: http://jsfiddle.net/abhitalks/qan2khse/

Snippet:

div.table {
    border: 1px solid gray;
    border-collapse: collapse;
    display: table;
}
div.cell {
    border: 1px solid gray;
    display: table-cell;
}
div.cell:first-child, div.cell:nth-child(2)  {
    width: 10%;
}
div.cell:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div.cell:last-child {
    width: 10%;
    text-align: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <span>Caption</span>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 table">
            <div class="cell">one</div>
            <div class="cell">two</div>
            <div class="cell">three</div>
            <div class="cell">four</div>
        </div>
    </div>
</div>

Upvotes: 0

SW4
SW4

Reputation: 71240

Note that Bootstraps grid is primarily layouting purposes, what you have here is grid based content, aka, a table.

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
html,
body {
  width: 100%;
  margin: 0;
}
table {
  width: 100%;
  table-layout: fixed;
}
td:first-of-type,
td:last-of-type {
  width: 50px;
}
td:nth-of-type(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<table class="table table-striped">
  <tr>
    <td>fit</td>
    <td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch
      stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td>
    <td>fit</td>
  </tr>
  <tr>
    <td>fit</td>
    <td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch
      stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td>
    <td>fit</td>
  </tr>
  <tr>
    <td>fit</td>
    <td>stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch
      stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch stretch</td>
    <td>fit</td>
  </tr>
  <table>

Upvotes: 3

Related Questions