Hello people.
I'm trying to convert two radio-buttons to a single checkbox (with some
vestiges of pure CSS checkbox I suspect), and am having difficulty that I'm
thinking 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 (sorry for its
size) :
.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;
}
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;
}
I'm using AngularJS 1.5.8. I know, it's old.
Any suggestions?
Thanks!
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/b019d9a9-651c-419e-a033-901618235691n%40googlegroups.com.
