Disabling Toolbar Button (not clickable)

Apliqo UX
1

I am trying to “disable” a toolbar button so that is not clickable (use case is for it to just display some short text directly on the toolbar). Through bootstrap CSS classes, I found that adding “disabled” achieves the visual effect but the button is still clickable.

image

"toolbarButton": {
    "class": "btn-info disabled",
    "iconClass": "fas fa-tools"
}

Is there a way to disable the clickable nature of the button entirely? In HTML, there is a disabled=“disabled” attribute I can set for the “button” tag which should achieve this. Namely:

<button type="button" class="btn btn-info disabled">Info</button>

How can I inject this into UX so that it is applied to a specific button? Thanks!

2

Hi @wwang,

You need to stop the button being clickable, I am guessing the class you are adding, called disabled, just makes it look disabled. Normally you would set the disabled attribute:

<button type="button" class="btn btn-info" disabled >Info</button>

You can stop something being clickable with:

.disabled {
  pointer-events: none
}
3

@tryan, thanks for the suggestion! “pointer-events” works perfectly! For future reference, here’s the combination I used:

custom-style.css

.btn-disabled {
    background-color: rgb(247, 247, 247);
    color:rgb(66, 73, 80);
    pointer-events: none;
}

Adv Options

  "toolbarButton": {
    "class": "btn-disabled",
    "iconClass": "fas fa-tools"
  }
1 Like