| Summary: | box-sizing border-box not working on input field inside table cell with percentage height | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Martin Schaus <martin.schaus> | ||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Critical | CC: | pguerrant | ||||
| Priority: | P2 | ||||||
| Version: | 528+ (Nightly build) | ||||||
| Hardware: | Unspecified | ||||||
| OS: | Unspecified | ||||||
| Attachments: |
|
||||||
Sorry, i meant padding-top and padding-bottom This becomes critical as it worked before and a layout editor relies on this. Created attachment 302425 [details]
Test Case
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! |
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>