Select All checkbox Boxlabel not clickable in internet explorer

Question

In the fiddle which I created mentioned below, Select All checkbox is not clickable in internet explorer.It is working correctly in chrome and Firefox https://fiddle.sencha.com/#view/editor&fiddle/1kn2.

I am using extjs version 6.0.1

Answer 1

It is because you have used padding: '0, 0, 0, -13' which is not allowing you to click the checkbox as it is hidden(as per IE).

It seems you don't want to show the default checkbox.So,You can achieve the same functionality using component instead of checkbox.

{
                xtype: 'component',
    //creating unique id because we need handle of this checkbox later
                id: id + 'selectAllChkBox',
            html: '<img class="checkbox-unchecked" style="height:13px;width:13px;"></img>' + ' Select All',
                    listeners: {
        render: function(chkBox){
            chkBox.getEl().on({
                click: function() {

                    combo.expand();
                    if (!allSelected) {
                        combo.select(combo.getStore().getRange());
                        totalCount = combo.getStore().getRange().length;

                        allSelected = true;
                        chkBox.setHtml('<img class="checkbox-checked " style="height:13px;width:13px;"></img>' + ' Deselect All');

                    } else {
                        combo.reset();
                        combo.setValue(null);
                        totalCount = 0;
                        allSelected = false;
                        chkBox.setHtml('<img class="checkbox-unchecked " style="height:13px;width:13px;"></img>' + ' Select All');
                    }               }
            });
        }
                    }

            }