[2.1][FIXED] Checkbox with no boxLabel aligns badly within form

[JamesC]

Example showing problem:

        var form = function() {
            return {
                init : function() {
                    var viewport = new Ext.Viewport({
                        layout: "border",
                        items:
                                new Ext.form.FormPanel({
                                    region: "center",
                                          frame: false,
                                    bodyStyle: "padding:5px 10px 0 10px;",
                                    autoHeight: true,
                                    frame: true,
                                    id: "form-ctr",
                                    items: [{
                                        xtype: "fieldset",
                                        layout: "table",
                                        height: 400,
                                        layoutConfig: {columns: 2},
                                        items: [{
                                            layout: "form",
                                            items: [{
                                                xtype: "textfield",
                                                fieldLabel: "Text Area",
                                                anchor: "98%"
                                            }]
                                        },{
                                            layout: "form",
                                            items: [{
                                                xtype: "textfield",
                                                fieldLabel: "Text Field",
                                                anchor: "98%"
                                            }]
                                        },{
                                            layout: "form",
                                            items: [{
                                                xtype: "textfield",
                                                fieldLabel: "Text Field",
                                                anchor: "98%"
                                            }]
                                        },{
                                            layout: "form",
                                            items: [{
                                                xtype: "textfield",
                                                fieldLabel: "Text Field",
                                                anchor: "98%"
                                            }]
                                        },{
                                            layout: "form",
                                            items: [{
                                                xtype: "textfield",
                                                fieldLabel: "Text Field",
                                                anchor: "98%"
                                            }]
                                        },{
                                            layout: "form",
                                            items: [{
                                                xtype: "checkbox",
                                                fieldLabel: "Check Box",
                                                anchor: "0%"
                                            }]
                                        }]
                                    }]
                                })
                            
                    });
                }
            }
        }();
        Ext.onReady(function() {
            form.init();
        }, form); 

The checkbox is misaligned, and is wrongly given by a left:-8px (given by the onResize)

My proposed fix is to only perform the alignTo if there is no boxLabel and no fieldLabel:

Ext.override(Ext.form.Checkbox, {
    onResize : function(){
        Ext.form.Checkbox.superclass.onResize.apply(this, arguments);
        if (!this.boxLabel && !this.fieldLabel) {
            this.el.alignTo(this.wrap, 'c-c');
        }
    }
}); 

[brian.moeskau]

Updated in SVN, thanks.

[Rothariger]

thanks... it help me a lot!

[Stripeman]

I think this issue is also in the 3.x release.
No matter where i put this override.. it doesnt work when i dont specify a fieldLabel. Yes I am using 'anchor: "0%"'

Where am I to put the code?:

  Ext.override(Ext.form.Checkbox, {
        onResize : function(){
            Ext.form.Checkbox.superclass.onResize.apply(this, arguments);
            if (!this.boxLabel && !this.fieldLabel) {
                this.el.alignTo(this.wrap, 'c-c');
            }
        }
    }); 

[evant]

This has been added for 3.x as well.

[casic]

i jus have a box with two checkboxes.
there is no labels for fields checkbox , but there is a boxLabel beside the box .
The fields is centered and i want to be left aligned.
Please HELP !!

[tenBoxelulley]

i have tried it with IE 6.0 & 7.0 as well as google chrome...

so i guess no one wlse has this problem then?