[2.0-2.2] boxLabel CSS

[Condor]

The CSS rule .x-form-cb-label contains invalid CSS:

.x-form-cb-label{width:'auto'!important;float:none!important;clear:none!important;display:inline!important;margin-left:4px;}

It should be:

.x-form-cb-label{width:auto!important;float:none!important;clear:none!important;display:inline!important;margin-left:4px;}
(without the quotes)

But actually I want to propose a different change so all those pesky !importants aren't needed:

Change:


.x-form-item label{display:block;float:left;width:100px;padding:3px;padding-left:0;clear:left;z-index:2;position:relative;}
.x-form-label-right label{text-align:right;}
.x-form-label-left label{text-align:left;}
.x-form-label-top .x-form-item label{width:auto;float:none;clear:none;display:inline;margin-bottom:4px;position:static;}
.x-form-cb-label{width:'auto'!important;float:none!important;clear:none!important;display:inline!important;margin-left:4px;}
to

.x-form-item label.x-form-item-label{display:block;float:left;width:100px;padding:3px;padding-left:0;clear:left;z-index:2;position:relative;}
.x-form-label-right label.x-form-item-label{text-align:right;}
.x-form-label-left label.x-form-item-label{text-align:left;}
.x-form-label-top .x-form-item label.x-form-item-label{width:auto;float:none;clear:none;display:inline;margin-bottom:4px;position:static;}
.x-form-cb-label{padding:3px;padding-left:0;z-index:2;margin-left:4px;}

Also notice that I removed the position:relative; from the .x-form-cb-label rule, which will make it position:static; (there is an old bugreport on this one).

ps. While testing if this change would affect form layout I also noticed that the Ext.form.Label component doesn't have a default class (e.g. x-form-label) assigned (which makes it difficult to style in other themes).

[Animal]

I agree with this. Selector specificity is better than !important.

And Ext.form.Label needs to be styled the same as labels of Ext.form.Fields by applying the same CSS rules.

[Condor]

And Ext.form.Label needs to be styled the same as labels of Ext.form.Fields by applying the same CSS rules.

I don't agree. Ext.form.Label needs it's own CSS rule (otherwise Ext.form.Label would be affected by the labelAlign config option of the form).

[Animal]

It at least needs



padding:3px 3px 3px 0;


So that it aligns with labels of Fields.