HTML & CSS Sometimes ng-change fires, sometimes it doesn't

[dstromberg]

Hello people.

I'm trying to convert two radio-buttons to a single checkbox (with some vestiges of pure CSS checkbox I suspect), and having difficulty that I'm pretty sure is due to my lack of familiarity with CSS.

In short, sometimes when I click the checkbox, it runs my ng-change, and sometimes it doesn't, and I don't know why.

Here's the relevant part of my HTML:

<div ng-if="!vm.updatingStatus" class="onoffswitch onoffswitch-build-preserve">
    <input type="checkbox" id="onoffswitch-build-preserve" name="onoffswitch-build-preserve" class="onoffswitch-checkbox"
        ng-model="build.preserved"
        ng-change="vm.preservation_toggle()"
    >
    <label class="onoffswitch-label" for="onoffswitch-build-preserve">
        <span class="onoffswitch-inner onoffswitch-inner-build-preserve"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>

And here is what I think is the relevant part of my CSS:

.onoffswitch {
    position: relative;
    width: 64px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select: none;
}
.onoffswitch-inner-build-preserve:before { content: "Preserved"; }
.onoffswitch-inner-build-preserve:after { content: "Not Preserved"; }
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 22px;
    padding: 0;
    line-height: 22px;
    font-size: 14px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "Off";
    padding-left: 9px;
    background-color: #7B1315; color: #F5E4E4;
}
.onoffswitch-inner:after {
    content: "On";
    padding-right: 9px;
    background-color: #0A5B28; color: #FFFFFF;
    text-align: right;
}
onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #999999;
    border-radius: 15px;
}
.onoffswitch-switch {
    display: block;
    width: 20px;
    margin: 1px;
    background: #FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 38px;
    border: 2px solid #999999;
    border-radius: 15px;
    transition: all 0.3s ease-in 0s;
}

Any suggestions? Why does vm.preservation_toggle() only get run sometimes?

Thanks!

 

[dstromberg]

In case it matters, I'm sometimes changing the state of the button from Javascript, using:

function sendCheckboxClick(which, set_to) {
    let checkbox_button = document.getElementById(which);
    let bool_checkbox_button = !! set_to;
    console.log(`fred 5: Setting checkbox button to ${bool_checkbox_button}`);
    checkbox_button.checked = bool_checkbox_button;
}

 

[dstromberg]

Oh! It probably matters that I'm using AngularJS!

 

[dstromberg]

In case it matters, I'm sometimes changing the state of the button from Javascript, using:

function sendCheckboxClick(which, set_to) {
    let checkbox_button = document.getElementById(which);
    let bool_checkbox_button = !! set_to;
    console.log(`fred 5: Setting checkbox button to ${bool_checkbox_button}`);
    checkbox_button.checked = bool_checkbox_button;
}

This does appear to matter, because if I add it to the happy-path, the errors commence immediately, instead of waiting until when the "you didn't really want to do that" case kicks in.

 

[dstromberg]

Using ng-click instead of ng-change solved the problem. Thanks to Zachary Askins for that suggestion.