Closed Bug 1368398 Opened 8 years ago Closed 3 years ago

Make file input browse button height calculation aware to box-sizing

Categories

(Core :: Layout: Form Controls, defect)

Product:
Core
Component:
Layout: Form Controls
Version:
52 Branch
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED WORKSFORME
Tracking Flags:
Tracking Status
firefox74 --- affected
firefox75 --- affected

People

(Reporter: yonjah, Unassigned)

References

Details

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0 Build ID: 20170420160349 Steps to reproduce: Example page - https://jsfiddle.net/f1pmgoy0/1/ - create a file input - give it fixed pixel height and padding or border - set it's box-sizing to border box Actual results: The "Browse..." button height is set to be equal the element height and overflows the input box Expected results: The "Browse..." button height should actually be element height - padding (top, bottom) - border (top, bottom)
Component: Untriaged → Layout: Form Controls
Product: Firefox → Core
Status: UNCONFIRMED → NEW
status-firefox74: --- → affected
status-firefox75: --- → affected
Webcompat Priority: --- → ?
Ever confirmed: true
See Also: → https://webcompat.com/issues/47904

in some circumstances of height and padding the content can become fully hidden, like in
https://webcompat.com/issues/47904

The fix is usually to set box-sizing: content-box
to note that chrome has a different behavior on border-box case

Webcompat Priority: ? → revisit

The testcase is now rendering the same in all browsers, so let's close this.

Status: NEW → RESOLVED
Closed: 3 years ago
Webcompat Priority: revisit → ---
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.