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