INPUT box-sizing border-box with 100% height and width inside TD issue in Chrome

Question

I found a nearly identical case to mine here. But the accepted answer does not work for me so I hope it's OK that I make a new question.

The pic below is what I want to achieve in all major browsers (at least IE8+, Firefox and Chrome). INPUTs placed inside TDs fills their parents both width and height.

My issue is that I can't get it done in Chrome with below code snippet. Thanks in advance

UPDATE: My issue on Chrome explained: If you take a closer look, there's 1 or 2px padding at top and bottom border. This is me on Chrome Version 47.0.2526.111 m on Windows 7 (Please open in new windows to see clearer)

UPDATE2: Big mistake on the sample. DIVs adapt their parent just fine without using the box-sizing. What I actually want is the INPUT to adapt their parent as well. Just updated my code snippet again.

table {
  border-collapse: collapse;  
  width: 100%
}
td {
  height: 100px;
  border: 1px #ccc solid;
}
input {
  border: 1px #ccc solid;
  height: 100%;
  width: 100%;  
  box-sizing: border-box;          /* works fine with IE8+ */
  -moz-box-sizing: border-box;     /* works fine Firefox */
  -webkit-box-sizing: border-box;  /* height is not correct in Chrome */
/*-webkit-box-sizing: content-box;    width is not correct in Chrome  */
}

<table>
  <tr>
    <td>
      <input type="text" value="this INPUT need to adapt to its parent TD">
    </td>
  </tr>
</table>

Works fine to me using version 47.0.2526.106 m and version 47.0.2526.111 m, on Windows 8.1 x64. — Ismael Miguel, Jan 14 '16 at 01:04
Could you include a screenshot of the issue you are seeing? I'm also seeing your code function in my copy of chrome. — Ted A., Jan 14 '16 at 01:26
Silly of me try to add images on comment. I've just edited the question to explain my issue on Chrome. Thanks! — Thanh Nhan, Jan 14 '16 at 01:44
@Pangloss Sorry, my mistake, DIVs work just fine. What I actually want is for INPUTs to work the same way as DIV. I'll update my code snippet and and screenshot right away. — Thanh Nhan, Jan 14 '16 at 02:20
@ThanhNhan : **-1, you label question for html / css and mark your own answer accepted having JS in it..... tagging issues??** — NoobEditor, Jan 19 '16 at 08:18
@NoobEditor I'm new to stackoverflow. I understood tags mean that question is related to but not limited to. As I stated that mine is a dirty fix, I'll un-accept it if another one comes up. — Thanh Nhan, Jan 19 '16 at 08:34

score 1 · Answer 1 · answered Jan 14 '16 at 01:56

This is an odd one, but I think what you are seeing is a td with a fixed height of 100px, and border widths on top and bottom of 1px throwing off the child divs height 100% calculation.

Would it be possible to assign the height to the div instead of the td like below? This works for me in chrome.

table {
  border-collapse: collapse;  
  width: 100%
}
td {
  border: 1px #ccc solid;
}
div {
  border: 1px #ccc solid;
  height: 100px;
  width: 100%;  
  box-sizing: border-box;          /* works fine with IE8+ */
  -moz-box-sizing: border-box;     /* works fine Firefox */
  -webkit-box-sizing: border-box;  /* height is not correct in Chrome */
/*-webkit-box-sizing: content-box;    width is not correct in Chrome  */
}

<table>
  <tr>
    <td>
      <div>BOX1</div>
    </td>
    <td>
      <div>BOX2</div>
    </td>
    <td>
      <div>BOX3</div>
    </td>
  </tr>
</table>

Assigning specific width and height to the DIVs yields the result I want but the thing is my TDs have different width and height. To put it simple, I want the child DIVs to adapt to their parent TD (which will have different sizes). I know it's a weird concept since it's usually the other way around that parent have to expand to fit their children. But it's can be helped since the 3years old project had been like this since the beginning. — Thanh Nhan, Jan 14 '16 at 02:06
I see. Well you can validate the space comes from height not being calculated properly by changing vertical-align on the TD. I'll look again when I'm back at a computer... — Ted A., Jan 14 '16 at 02:38

score 1 · Answer 2 · answered Jan 19 '16 at 09:24

why not use simple css layouts rather than doing an over kill with tables?

Fiddle

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
}

.padding {
  height: 100px;
}

.outer_border {
  padding: 1px;
  border: 1px solid black;
}

input {
  border: 1px black solid;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

HTML

 <div class="container">
  <div class="outer_border">
    <div class="padding">
      <input type="text" value="this INPUT need to adapt to its parent TD">
    </div>
  </div>
</div>

Yes, I know tables are ugly. But it is by designed since the beginning and I don't have any control over that. You know, just a corporate developer stumbled a ancient project with ugly design by people with old mindset (fml). Anyways, since tables are ugly and rarely used, no wonder there won't be a good answer for my question anytime soon. Thanks for your suggestion though, it'll help people starting up a new project. — Thanh Nhan, Jan 20 '16 at 00:13

score 0 · Accepted Answer · answered Jan 19 '16 at 08:10

I'm actually looking for the answer to this question for quite a time now (since 2014). Lying around the internet are some post say that this is a bug of Chromium. I managed to recall a link here. Nonetheless, I doubt there will be answer soon.

Meanwhile, I would like to propose a quick and dirty fix for anyone who got in the same problem as me: For chrome, wrap all the INPUTs inside a DIV.

$(function() {
  
  // if agent is of Chrome
  var isChrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase());
  
  if (isChrome) {
    $("table td>:input").wrap($("<div>", {"class": "input-container"}));
  }
});

table {
  border-collapse: collapse;  
  width: 100%
}
td {
  height: 100px;
  border: 1px #ccc solid;
}
input {
  border: 1px #ccc solid;
  height: 100%;
  width: 100%;  
  box-sizing: border-box;          /* works fine with IE8+ */
  -moz-box-sizing: border-box;     /* works fine Firefox */
/*-webkit-box-sizing: border-box;     height is not correct in Chrome
 *-webkit-box-sizing: content-box;    width is not correct in Chrome  */  
}
div.input-container {
  height: 100%;
  width: 100%;  
  -webkit-box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="text" value="this INPUT need to adapt to its parent TD">
    </td>
  </tr>
</table>

INPUT box-sizing border-box with 100% height and width inside TD issue in Chrome

3 Answers3