Bug 148872

Summary:

Centering text inside a button set to display flex and justify-content: center is impossible

Product:

WebKit

Reporter:

Jon Honeycutt <jhoneycutt>

Component:

Layout and Rendering

Assignee:

Dave Hyatt <hyatt>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

commit-queue, erictaylor89, esprehn+autocc, glenn, hyatt, kondapallykalyan, me, ntilwalli, webkit-bug-importer

Priority:

Keywords:

BlinkMergeCandidate, InRadar

Version:

WebKit Nightly Build

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
test case	none
expected result	none
Patch	none
Patch	simon.fraser: review+

Jon Honeycutt

Reported 2015-09-04 19:38:28 PDT

Created attachment 260665 [details] test case Centering text inside a button set to display flex and justify-content: center is impossible. Test cases come from crbug.com/344733.

Attachments
test case (403 bytes, text/html) 2015-09-04 19:38 PDT, Jon Honeycutt	no flags	Details
expected result (334 bytes, text/html) 2015-09-04 19:39 PDT, Jon Honeycutt	no flags	Details
Patch (8.73 KB, patch) 2017-02-28 12:53 PST, Dave Hyatt	no flags	Details Formatted Diff Diff
Patch (8.65 KB, patch) 2017-02-28 13:04 PST, Dave Hyatt	simon.fraser: review+	Details Formatted Diff Diff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2015-09-04 19:38:39 PDT

<rdar://problem/22590086>

Jon Honeycutt

Comment 2 2015-09-04 19:39:15 PDT

Created attachment 260666 [details] expected result

Eric Taylor

Comment 3 2015-10-23 11:20:55 PDT

This bug also effects input elements as well. Setting display: flex; and justify-content: center; on either element will result in the element not being a flexbox and the inner text aligns left and not centered. Currently my workaround is to target Safari specifically and set display: -webkit-box; which fixes the issue and I get the expected result. Safari and iOS are the ONLY browsers I have this issue on. I have tested and I get the expected result from latest: - Chrome - Firefox - IE 10 - Microsoft Edge - Opera It would be nice if this could be fixed to match every other browser out there. P.S. This bug still exists on latest nightly (WebKit r191494).

Eric Taylor

Comment 4 2015-10-23 11:45:13 PDT

Ignore my comment about setting -webkit-box fixing, just realized that's the same as setting display:block. So it looks like there is indeed NO way to properly set flexbox on button or input elements.

ntilwalli

Comment 5 2016-09-28 15:38:23 PDT

Please fix this issue. I just encountered this for a button element. I worked around it by adding a div as a child and then doing the flex-box work within that.

Dave Hyatt

Comment 6 2017-02-28 12:53:44 PST

Created attachment 302970 [details] Patch

Dave Hyatt

Comment 7 2017-02-28 13:04:05 PST

Created attachment 302972 [details] Patch

Simon Fraser (smfr)

Comment 8 2017-02-28 13:31:35 PST

Comment on attachment 302972 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=302972&action=review > Source/WebCore/rendering/RenderButton.h:55 > + void updateAnonymousChildStyle(const RenderObject& anonymousChild, RenderStyle&) const override; Can this be private? > LayoutTests/fast/forms/button-set-display-flex-justifyContent-center.html:14 > +<h4>Test for crbug.com/344733: Centering text inside a button set to display flex and justify-content: center is impossible</h4> Let's not reference Test for crbug.com/344733 here.

Dave Hyatt

Comment 9 2017-02-28 13:49:46 PST

Fixed in r213173.

Note You need to log in before you can comment on or make changes to this bug.