Skip to content

Conversation

bryan-brancotte
Copy link

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

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

Fixing gitbrent#32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant