CODEWITHSUNDEEP
jquerytwitter-bootstrapaccordion
nathasm
nathasm

Reputation: 2574

Shifting checkboxes with absolute position in bootstrap accordion

I have the following plnkr:

https://plnkr.co/edit/hh2ItK6Jgcf0AC5PU9Tl?p=preview

.right {
  position: absolute;
  right: 30px;
}

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" aria-expanded="true">Industry</a>
      </h4>
    </div>
    <div class="panel-collapse collapse in" id="collapseOne" aria-expanded="true" style="">
      <div class="panel-body">
        <p class="selection">
          <label for="industry1">Industry 1</label>
          <span style="position: absolute; right: 30px;">
            <input class="category" id="industry1"
                   name="check" type="checkbox" value="industry-1" />
          </span>
        </p>
      </div>
    </div>
  </div>
</div>

What I am trying to implement is an accordion dropdown that contains a list of options and checkboxes.

What is happening is that the checkbox moves as the accordion is expanding/collapsing. What I want is to have the checkbox not move during the expand/collapse phase so that it is always positioned 30px from the right.

What is the CSS magic to make that happen?

Upvotes: 1

Views: 1136

Answers (1)

Jack
Jack

Reputation: 2771

As I noted in the comments, the main shift is due to the fact that the float inside the .panel-title is not being cleared.

I think my favorite solution would be to change .panel-heading a:after to position: absolute, and remove the float completely.

.panel-heading a:after {
    font-family: 'FontAwesome';
    content: "\f106";
    color: #fff;
    background-color: #3593d0;
    padding: 0 10px;
    line-height: 37.6px;
    position: absolute;
    top: 0;
    right: 0;
}

You will want to add position: relative to its parent so that it is positioned absolutely within the parent element.

The .right class is causing a small jump as well. This can be helped in one of the following ways:

1 - Adding position: relative to the parent element, so that .right is absolutely positioned within that element, rather than some other element.

.selection {
    position: relative;
}

.right {
    position: absolute;
    right: 30px;
}

2 - Changing .right to float: right instead of position: absolute.

Putting it all together:

.selection {
    position: relative;
}

.right {
    position: absolute;
    right: 30px;
}

/* OR just .right { float: right; } */


/* -------- */

.panel-heading {
    position: relative;
}

.panel-heading a:after {
    font-family: 'FontAwesome';
    content: "\f106";
    color: #fff;
    background-color: #3593d0;
    padding: 0 10px;
    line-height: 37.6px;
    position: absolute;
    top: 0;
    right: 0;
}

.panel-heading a.collapsed:after {
    content: "\f107";
}

Upvotes: 2

Related Questions