bootstrap4-toggle icon indicating copy to clipboard operation
bootstrap4-toggle copied to clipboard

input-group support

Open bryan-brancotte opened this issue 4 years ago • 0 comments

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 : Capture d’écran de 2020-04-21 09-31-34

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

bryan-brancotte avatar Apr 21 '20 07:04 bryan-brancotte