Question

I’ve got long labels for a couple checkboxfields in my app, and unfortunately it causes some strange behavior.

Is there any way to make this look a little better? I mean, if I ‘touch’ the gray area, the checkbox does not activate (even if the checkbox is inside the gray area)… but instead I have to click the white area. It’s just kinda confusing.

Even if I set labelWidth: '80%' to each checkboxfield, the words still wrap and show that little gray area. I’d rather that area be all white and all of it be ‘touchable’ to activate the checkbox.

Answer 1

I have a same problem, I found 3 ways to fix it, choose the best way for you, I use the 3rd version. Sorry my english is not the best, I hope it will be understandable 🙁

1st solution:
You can add custom css entry. It will fix the problem, but if you change the theme, it could be wrong.

.x-form-field-container {
    background: white;
}

2nd solution:
You can use overflow hidden, but it this case the text on end will be cutted.

.x-form-label {
    overflow: hidden;
}

.x-form-label span
{
    white-space: nowrap;
}

3rd solution:

You can use your label with 100% width before the field. In this case the input field’s width will 100% too.

new Ext.form.FormPanel({
    title: 'Form name',
    scroll: 'vertical',
    items: [{
        xtype: 'fieldset',
        title: 'Fieldset title',
        items: [{
            xtype: 'field',
            html: '<div class="x-form-label" style="width:100%"><span>This is the label of the field in below</span></div>'
        },{
            xtype: 'selectfield',
            name: 'nameOfTheField'
            //without label attribute
        }]
    }]
});

EDIT

_{by rockinthesixstring}

Here’s the modification that I made in order to achieve the same results.

CSS

.x-checkbox{ background:white;}

JS

{
    xtype: 'checkboxfield',
    name: 'updateinfo',
    label: 'Update my info',
    labelWidth: '80%',
    cls: "x-checkbox"
}