icheck-bootstrap
icheck-bootstrap copied to clipboard
not working inside a dynamically generated content
Using Bootstrap 4.0, icheck-bootstrap from AdminLTE3
I have a modal that is cloned and triggered on click like so:
$('body').on('click', '.btn-modal-add-resource', function() {
let modal = $('.resource-modal-template').clone().removeClass('.resource-modal-template')
modal.modal()
modal.on('hidden.bs.modal', function (e) { $(this).remove() })
})
and within that modal I have the html code:
<div class="form-group">
<div class="icheck-primary">
<input type="radio" id="someRadioId1" name="someGroupName" />
<label for="someRadioId1">Option 1</label>
</div>
<div class="icheck-primary">
<input type="radio" id="someRadioId2" name="someGroupName" />
<label for="someRadioId2">Option 2</label>
</div>
</div>
the radio button cannot be clicked. unless I removed the icheck-primary class and follow the normal radio button from bootstrap - but that'd be without the style.. normally for this kind of issue is about initializing the element from javascript. but this library is fully css
I used this workaround to get it working:
/* fix icheck dynamically inserted */
[class*="icheck-"] > input {
z-index: 1;
cursor: pointer;
width: 22px;
height: 22px;
}
I used this workaround to get it working:
/* fix icheck dynamically inserted */
[class*="icheck-"] > input {
z-index: 1;
cursor: pointer;
width: 22px;
height: 22px;
}
wow this works for me on vuejs too. Thanks!