Bootstrap 4 & Font Awesome TreeView checkboxes do not work

[srycroft]

Using Bootstrap 4 and Font Awesome, the tree view checkboxes do not work. The boxes are there, but clicking does not check them.

Example: http://esdi.excelsystems.com/scripts/sdr/bootstrap4CheckboxesNotWorking.html

Changing to use Material Design icons also does not work - there is some graphic disruption/mismatch of some type.

[gabi85ro]

I can confirm this, I'm having the same issue: the checkbox appear, but cannot select any of them. You can check by changing in http://gijgo.com/LiveEdit/Index/bootstrap-4-treeview.html?component=tree the imageUrlField: 'flagUrl' line to checkboxes: true and then click Run example.

Thank you, Cosmin

[Rudedog9d]

+1 on this. It looks like the fontawesome icons are messing it up.

I've found a work around, maybe the maintainers can do something useful with it. Add the following to the example on the site

/* Set the checkbox icons manually via CSS */
    .gj-checkbox-material-icons input[type="checkbox"]:indeterminate + span:after {
      content: '\2796';
    }

    .gj-checkbox-material-icons input[type="checkbox"]:checked + span:after {
      content: '\2714';
    }

<!-- Import a font, as v4 no longer has glypicons - we use open-iconic -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" />

$('#tree').tree({
        uiLibrary: 'bootstrap4',
        // Set the Expand/Collapse Icons to something explicitly, instead of using fontawesome
        icons: {
          expand: '<span class="oi oi-chevron-right"></span>',
          collapse: '<span class="oi oi-chevron-bottom"></span>'
        },
        dataSource: '/api/v1/controls/tree',
        checkboxes: true
      });

Would be great to see a fix for this, instead of a hack like above.

[atatanasov]

We are going to fix that in the new version. The new version is coming soon. stay tuned

[atatanasov]

The fix is already avialable in the latest development build located at https://github.com/atatanasov/gijgo/tree/master/dist

[Rudedog9d]

@atatanasov Would you consider adding support for custom checkmark/indeterminate icons, like the expand/collapse icons have? I tested the BS4 fix on master and it works, but we are not using font-awesome and don't want to include it just for two icons.