Bug 137693

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:

Version:

528+ (Nightly build)

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
Test Case	none

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.