CODEWITHSUNDEEP
extjscheckbox
oogles
oogles

Reputation: 1232

ExtJS: Preventing Checkboxes inheriting the hideLabel attribute of their parent CheckboxGroup

I am trying to display checkboxes within checkboxgroups. To keep them lined up with the other fields in the form, I want to disable the group's fieldLabel, while keeping each checkbox's individual fieldLabel. However, if I set hideLabel to true for the checkboxgroup, the field labels for the individual checkboxes disappear also, even if I explicitly set hideLabel to false.

Is this going to be possible? Thanks for any help.

Edit: As requested, some code:

config = {
    xtype: 'checkboxgroup',
    hideLabel: true,
    columns: 1,
    items: [{
        fieldLabel: 'Item 1', 
        hideLabel: false
    }, {
        fieldLabel: 'Item 2', 
        hideLabel: false
    }]
};

Upvotes: 1

Views: 1889

Answers (2)

oogles
oogles

Reputation: 1232

I solved this using some custom CSS. Instead of setting display: none to any label elements that are descendants of a container with the x-hide-label class, it is only applied to labels that are direct children of such a container.

.x-hide-label label.x-form-item-label {
    display: inline;
}

.x-hide-label > label.x-form-item-label {
    display: none;
}

It's not perfect, but it works for me. Checkboxes and their labels remain aligned properly with all other form elements.

Upvotes: 0

It Grunt
It Grunt

Reputation: 3378

Are you defining a boxLabel on the checkboxes? You should define the boxLabels on the combos and set hideLabel to true on the checkboxgroup.

Upvotes: 0

Related Questions