Skip to content

input-group support#36

Open
bryan-brancotte wants to merge 1 commit intogitbrent:masterfrom
bryan-brancotte:patch-1
Open

input-group support#36
bryan-brancotte wants to merge 1 commit intogitbrent:masterfrom
bryan-brancotte:patch-1

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