CODEWITHSUNDEEP
twitter-bootstrapcss-transitions
user1853235
user1853235

Reputation: 313

Bootstrap collapse and padding issue

I'm using the collapse with transitions. The code below works but because I have 10px padding in my stylesheet I see the div collapse but stop 10px before it should and then vanish. The reverse is true on expanding as the div expands to 10px greater than it should before snapping back to the correct size.

HTML

<div ng-controller="MainCtrl" class="box-content collapse" id="mybox">
                            Lorem ipsum ...
</div>

CSS

.box-content{
    background: red;
    padding: 10px;
}

Upvotes: 12

Views: 14065

Answers (3)

Watcharakrit Phantu
Watcharakrit Phantu

Reputation: 107

You have to wrap your content in .collapse and if you want to have padding, you can set CSS of your wrapper.

HTML

<div ng-controller="MainCtrl" class="box-content collapse" id="mybox">
  <div class='wrapper'>                  
    Lorem ipsum ...
  </div>
</div>

CSS

.wrapper{
  padding: 10px;
}

Upvotes: 11

Juan Casares
Juan Casares

Reputation: 348

If you don't want to change the HTML structure, add these styles:

/* Override bootstrap collapse to keep margins */
.collapse.in {
  display: inherit;
  visibility: visible;
}
.collapse {
  display: inherit;
  visibility: hidden;
}

Bootstrap sets display to none when the animation finishes, which removes the entire div, including the padding. Setting visibility to hidden does not remove the div, but it's height is 0, so all is left is the padding.

Make sure these styles are defined after the bootstrap stylesheet.

Upvotes: 0

user1853235
user1853235

Reputation: 313

Easy - just add another div inside the collapse one which has the styling

Upvotes: 8

Related Questions