box-sizing border-box not working on input field inside table cell with percentage height 
https://bugs.webkit.org/show_bug.cgi?id=137693
Summary box-sizing border-box not working on input field inside table cell with perce...
Martin Schaus
Reported 2014-10-14 07:13:27 PDT
box-sizing border-box not working on input field inside table cell with percentage height. I think accidently the inner padding-top and padding-left of the input field is added to the table cell, as the effect increases if you set a higher padding value to the input element. Try the below example (Chrome wrong, IE10 ok, FF ok) <!doctype html> <html> <body> <div style="height: 100px; width: 100px"> <input style="box-sizing: border-box; padding 10px; height: 100%; width: 100%" value="correct"> </div> <div style="height: 100px; width: 100px"> <table cellpadding="0" cellspacing="0" style="height: 100%; width: 100%;"> <tbody> <tr> <td class="" style="height: 100%;"> <input type="text" style="height: 100%; width: 100%; box-sizing: border-box; padding: 10px;" value="wrong"> </td> </tr> </tbody> </table> </div> </body> </html>
Attachments
Test Case (776 bytes, text/html)
2017-02-22 12:43 PST, Phil 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Martin Schaus
Comment 1 2014-10-14 07:14:26 PDT
Sorry, i meant padding-top and padding-bottom
Martin Schaus
Comment 2 2014-10-20 00:25:38 PDT
This becomes critical as it worked before and a layout editor relies on this.
Phil
Comment 3 2017-02-22 12:43:41 PST
Created attachment 302425 [details] Test Case
Phil
Comment 4 2017-02-22 12:44:37 PST
I've attached an additional test case that demonstrates the issue using a pair of divs with display table and table-cell with an input inside the table cell using 100% height. It would be really great if we could get this fixed. Thanks!
Note You need to log in before you can comment on or make changes to this bug.