New issue
Advanced search Search tips

Issue 690036 link

Starred by 3 users
Status: Available
Owner: ----
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac
Pri: 3
Type: Bug



Sign in to add a comment

Vertical-align baseline on BUTTON

Reported by clement....@gmail.com, Feb 8 2017 
UserAgent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:51.0) Gecko/20100101 Firefox/51.0

Steps to reproduce the problem:
1. Add a button with 2 or more lines, and some text in a list-item (ol-li or ul-li).

What is the expected behavior?
Button should understand "vertical-align: baseline" the same way textarea or img do (same way Firefox or Internet Explorer do too)

What went wrong?
The vertical-align: baseline of a button looks as if it is set to bottom. 

On multiple lines, the button is aligned to the baseline of the FIRST line, not the LAST one (as Firefox or Internet Explorer do).

Compare with an "img + text" or a "textarea + text" in an ul-li; both stick to the first line (vertical-align baseline by default).

Shoud be the same for button.

Did this work before? N/A 

Chrome version: Google Chrome  56.0.2924.87 (Build officiel) (64 bits)  Channel: n/a
OS Version: 
Flash Version:

Comment 1 by clement....@gmail.com, Feb 8 2017 

Wrong title : only "button" is concerned.

Same bug on Linux, Win, Mac.

Comment 2 by clement....@gmail.com, Feb 8 2017

button-baseline.png
13.1 KB View Download

Comment 3 by ligim...@chromium.org, Feb 8 2017

Labels: Needs-Triage-M56
Woulds you mind providing a sample html testcase for the ease of triaging.

Comment 4 by kdub...@mozilla.com, Feb 9 2017 

Here a test case for the issue mentioned here.
button-baseline.html
5.4 KB View Download

Comment 5 by kdub...@mozilla.com, Feb 9 2017 

Rendering from left to right: Safari, Firefox and Chrome
Capture d’écran 2017-02-09 à 10.07.20.png
196 KB View Download

Comment 6 by clement....@gmail.com, Feb 10 2017 

Actually, same problem with a button in a simple text.

Code : lorem ipsum dolor <button>Button <br> set on <br> three lines</button> sit amet et consectetuer

Comment 7 by clement....@gmail.com, Feb 10 2017

button-in-text.png
5.5 KB View Download

Comment 8 by erikc...@chromium.org, Feb 13 2017

Components: -UI Blink

Comment 9 by junov@chromium.org, Feb 14 2017

Components: -Blink Blink>Fonts

Comment 10 by e...@chromium.org, Feb 14 2017

Components: -Blink>Fonts Blink>Forms>Button

Comment 11 by tkent@chromium.org, Feb 16 2017

Labels: -Pri-2 -Needs-Triage-M56 Hotlist-Interop OS-Android OS-Chrome OS-Linux OS-Windows Pri-3
Status: Available (was: Unconfirmed)
Summary: Vertical-align baseline on BUTTON (was: Vertical-align baseline on button and input)
The <button> behavior is not same as multi-line <div style="display:inline-block">, and not compatible with Firefox and Edge.  We should fix this.
Project Member

Comment 12 by sheriffbot@chromium.org, Feb 16 2018

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available. If you change it back, also remove the "Hotlist-Recharge-Cold" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 13 by tkent@chromium.org, Feb 20 2018

Labels: -Hotlist-Recharge-Cold
Status: Available (was: Untriaged)
►

Sign in to add a comment