Full height input in td with bootstrap

Question

See http://jsbin.com/sawofo/2/edit. I am trying to fill a table cell with an input, using bootstrap's css, but I am left with a gap that I can't get rid of.

My html snippet is:

<table class="table table-bordered">
  <tbody>
    <tr>
      <td class="with-input"><input class="form-control tall" type="text" value="text"></td>
      <td class="tall">XX</td>
    </tr>
  </tbody>
</table>

And the CSS which allows the input to stretch is:

td {
  padding: 0px !important;
}

td.tall {
  height: 100px;
}

input.tall {
  margin: 0;
  height: 100% !important;
  display: inline-block;
  width: 100%;
}

But there is still a gap at the bottom of the input that I can't get rid of. It appears to have something to do with bootstrap setting

* {
    box-sizing: border-box;
}

but I can't figure out how to reverse the effect without completely removing bootstrap. If I set the td to use content-box, the height is fine but it overflows horizontally into the next cell.

score 0 · Answer 1 · answered Nov 19 '14 at 10:46

0

add padding: 0;

td {
  padding: 0px !important;
}

td.tall {
  height: 100px;
  padding: 0;
}

input.tall {
  margin: 0;
  height: 100%;
  display: inline-block;
  width: 100%;
  padding: 0;//added
}

output

http://jsbin.com/kefibozapo/1/

answered Nov 19 '14 at 10:46

Manjunath Siddappa

2,126
2
21
40

There is still a gap the bottom, although it is a lot smaller. But the biggest problem is that I do actually padding within the `input`. – aquavitae Nov 19 '14 at 10:50
In my example I'm using a fixed height to illustrate the problem. In my actual implementation the height changed because of other content, so I can't just hard-code the min-height of the `input` to the height of the `td`. – aquavitae Nov 19 '14 at 11:01

score 0 · Answer 2 · answered Nov 19 '14 at 11:30

I found the solution. It seems that for some reason the padding leaks from the child element to the td, so setting padding: 10px on the input also assigns it to the td. The solution is to wrap the input in a div with style:

padding: 0;
display: inline-block;
height: 100%;
width: 100%;

E.g.: http://jsbin.com/sawofo/4/edit

Full height input in td with bootstrap

2 Answers2

Linked