bootstrap4-toggle
bootstrap4-toggle copied to clipboard
input-group support
When using a toggle in a input-group-btn, the position: absolute
was overridden. By using a more specific selector, we ensure that position is absolute
Example :
https://jsfiddle.net/cLxqzup5/
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<br/>
<div class="col-12">
<h2>
without fix
</h2>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-btn">
<input type="checkbox" aria-label="Checkbox for following text input" data-toggle="toggle" data-on="Enabled" data-off="Disabled" data-offstyle="info">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-btn">
<input type="checkbox" aria-label="Checkbox for following text input" data-toggle="toggle" data-on="Enabled" data-off="Disabled" checked="checked" data-offstyle="info">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
</div>
<hr/>
<div class="col-12 with-fix">
<h2 >
with fix
</h2>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-btn">
<input type="checkbox" aria-label="Checkbox for following text input" data-toggle="toggle" data-on="Enabled" data-off="Disabled" data-offstyle="info">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-btn">
<input type="checkbox" aria-label="Checkbox for following text input" data-toggle="toggle" data-on="Enabled" data-off="Disabled" checked="checked" data-offstyle="info">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
</div>
.with-fix .input-group-btn .toggle-on, .toggle-on {
position: absolute;
}
.with-fix .input-group-btn .toggle-off, .toggle-off {
position: absolute;
}
Fixing #32