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

RESOLVED FIXED

Status

()

RESOLVED FIXED
16 years ago
11 years ago

People

(Reporter: martin.thomson, Unassigned)

Tracking

({testcase})

Trunk
testcase
Points:
---
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

16 years ago
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.
(Reporter)

Comment 1

16 years ago
Created attachment 119929 [details]
Demonstrate alignment problems

Demonstrates text alignment problems when width, min-width and both are
specified.  Also adds the text-align property to each.
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?
OS: Windows 2000 → All
Hardware: PC → All

Comment 3

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

Comment 4

14 years ago
Confirming per comment 2.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: testcase

Comment 5

14 years ago
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

13 years ago
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!
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

11 years ago
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.
This got fixed by bug 300030.  The fix will appear in Firefox 3.

I added Martin's testcase to the regression tests.
Status: NEW → RESOLVED
Last Resolved: 11 years ago
Depends on: 300030
Flags: in-testsuite+
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.