PDA

View Full Version : Ext.Button minWidth doesn't work in Firefox



corey.gilmore
3 Apr 2007, 12:35 PM
With Firefox 1.5.x and 2.0.x, creating a new button using minWidth doesn't work properly. The problem seems to be here:


Ext.extend(Ext.Button, Ext.util.Observable, {
...
render : function(renderTo){
...
if(Ext.isIE && !Ext.isIE7){
this.autoWidth.defer(1, this);
}else{
>> this.autoWidth();
}
>> btn.addClass("x-btn");

Once the x-btn class is applied the button width changes. The CSS behind it is:

.ext-gecko .x-btn button {
padding-left:0;
padding-right:0;
}

Dropping the .x-btn is enough of a change to the processing order to fix it, although I'm not sure if that will break anything.

.ext-gecko button {
padding-left:0;
padding-right:0;
}

corey.gilmore
3 Apr 2007, 12:41 PM
If you want to work around this without modifying any of the Ext CSS (recommended) add the following somewhere after you load ext-all.css.



.ext-gecko .x-btn button {
padding-left:auto;
padding-right:auto;
}

.ext-gecko button {
padding-left:0;
padding-right:0;
}

jack.slocum
3 Apr 2007, 6:07 PM
I have moved the addClass before the autoWidth call. Thank you for hunting it down!