201293 - Text alignment in buttons is inconsistent when using width and min-width properties

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Martin Thomson]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-GB; rv:1.3; MultiZilla v1.4.0.3G) Gecko/20030312
Build Identifier: ftp://ftp.mozilla.org/pub/mozilla/nightly/latest-trunk/mozilla-win32-installer.exe (20030408)

The positioning of text on a button is different depending on whether its width
is calculated from the size of the text, the "width" CSS property or the
"min-width" property.

Reproducible: Always

Steps to Reproduce:
1. <button style="width: 128px">button</button>
2. <button style="min-width: 128px">button</button>
2. <button style="width: 128px; min-width: 256px">button</button>
Actual Results:  
When using "width" the text is centre aligned on the button.  When using
"min-width" the text is left aligned.  Using both results in the text being
centred properly.

1. [    button    ]
2. [ button       ]
3. [         button           ]

Expected Results:  
Usage of min-width should be consistent with width.

1. [    button    ]
2. [    button    ]
3. [         button           ]

The "text-align" property should also be honoured for these elements.

Comment 1

[Martin Thomson]

Attachment: Demonstrate alignment problems

Demonstrates text alignment problems when width, min-width and both are
specified.  Also adds the text-align property to each.

Comment 2

[Boris Zbarsky [:bzbarsky]]

Confirming.  This is probably because the min-width does not affect
mComputedWidth..... so the button doesn't adjust the text alignment.  Perhaps it
should recompute the centering in SetRect?

Comment 3

[Jeroen Roos]

Bug is still there in Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.2)
Gecko/20040820

Comment 4

[Jason Barnabe (np)]

Confirming per comment 2.

Comment 5

[Niek v/d Maas]

Confirming this one. Just discovered this today, it's still in Firefox 1 final.
My testcase (original use: demonstrate IE fix for min-width) is available at
http://www.niekvandermaas.nl/zooi/min-width-fix-test.html

Comment 6

[webmaster]

Confirmed on Firefox 1.5 and Camino 1.0 on OSX 10.4.3
Please fix it - it's so ugly :(  and more than 2 years old!

Comment 7

[Mikhail E Krasilnikiov]

User Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
ID: 2006120418


Bug still present...

Comment 8

[Joachim Rousseau]

I repport also this bug with Firefox 2.0.0.12.
The only difference is the use of <input type="button"> instead of <button>.
The text-align of text inside button is broken when you set a min-width.
forcing text-align to center does'nt help.
HTML :
<input type="button" class="centeredButton" id="b0" name="bname" value="Click!" />
CSS:
.centeredButton{
 min-width:250px;
 text-align:center;
}
EXPECTED:
[          Click!          ]
ACTUAL:
[  Click!                  ]
NOTE : 
When you remove the min-width property, the ectual text-align is as expected.

Comment 9

[Boris Zbarsky [:bzbarsky]]

This got fixed by bug 300030.  The fix will appear in Firefox 3.

I added Martin's testcase to the regression tests.