CSS height transition in presence of padding (not covered by existing answers)

Question

[My question differs from the suggested duplicate because of the presence of padding in my animated div]

Trying to get a div to expand, without having fixed heights and with some padding. My css is below and I toggle .closed in and out using jquery.

.slide {
  padding: 10%;
  background-color: gold;
  overflow-y: hidden;
  transition: height 2s;
  transition: max-height 2s;
  height: auto;
  max-height: 1000px;
}

.closed {
  height: 0;
  max-height: 0;
}

The issue is that with the padding you can't hide the text to start with, and without a fixed height you don't get a transitioned css change. Can anyone help - hope I don't need to do more with javascript?

Update I've now got to:

.slide {
  padding: 10%;
  background-color: gold;
  overflow-y: hidden;
  transition: max-height 2s ease;
  max-height: 500px;
}

.closed {
  max-height: 0;
  padding: 0;
  transition: all 2s ease;
}

See plnkr. The problem now is the padding on closing. In the case above it transitions out, and if i limit the transition in .closed to max-height then there is a jarring effect as it collapses just as the animation starts.

You can't transition to `height:auto` in CSS..even JQuery can't do that natively...although there are plug-ins to add that functionality. You could try transitioning `max-height` instead. — Paulie_D, Jun 12 '15 at 18:09
max height will work as long as you wrap the content in something. That's the only thing you are missing: http://plnkr.co/edit/3caEykW27d7pgHOfT6Fp?p=preview. It does however have an unsightly delay for close. — Joseph Marikle, Jun 12 '15 at 18:20
@Paulie_D definitely not a duplicate, this question is about padding. — Christophe, Nov 22 '15 at 06:37

score 4 · Answer 1 · answered Feb 09 '16 at 11:54

Hello I imagine that you have this fixed now as you posted a long time ago, but I just came across the same situation and made my own solution.

Basically I just created an empty div within the element that you are showing/hiding and applied the padding to that.

<ul class="dropdown-menu" role="menu">
    <div class="padding-div">
          <li>menu-item</li>
          <li>another-menu-item</li>
          <li>yet-another-menu-item</li>
     </div>
</ul>



.dropdown-menu {
    display: block;
    position: absolute;
    background: #fff;
    list-style: none;
    overflow: hidden;
    max-height:0;
    transition: max-height 0.7s ease-in;
    right: 0;
    top: 60px;
    width: 125px;
}

.padding-div {
      padding: 20px;

 /* Whatever you need to position everything correctly again eg.*/
          position: relative;
          right: 10px;
          text-align: center;
        }

CSS height transition in presence of padding (not covered by existing answers)

1 Answers1