New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap 4 & Font Awesome TreeView checkboxes do not work #150

Closed
srycroft opened this Issue Sep 15, 2017 · 5 comments

Comments

Projects
None yet
4 participants
@srycroft

srycroft commented Sep 15, 2017

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

This comment has been minimized.

Show comment
Hide comment
@gabi85ro

gabi85ro Sep 29, 2017

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

gabi85ro commented Sep 29, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Rudedog9d

Rudedog9d Oct 6, 2017

+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.

Rudedog9d commented Oct 6, 2017

+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 atatanasov added the bug label Oct 7, 2017

@atatanasov

This comment has been minimized.

Show comment
Hide comment
@atatanasov

atatanasov Oct 7, 2017

Owner

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

Owner

atatanasov commented Oct 7, 2017

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

@atatanasov atatanasov closed this in b85b7d4 Oct 8, 2017

@atatanasov

This comment has been minimized.

Show comment
Hide comment
@atatanasov

atatanasov Oct 8, 2017

Owner

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

Owner

atatanasov commented Oct 8, 2017

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

@Rudedog9d

This comment has been minimized.

Show comment
Hide comment
@Rudedog9d

Rudedog9d Oct 10, 2017

@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.

Rudedog9d commented Oct 10, 2017

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment