1

I have a Bootstrap (4) centered Modal with a fixed width and dynamic height based on the content within the modal (the default behavior).

Inside the modal, I have several divs that will be hidden or shown based on some conditions. The text inside the modal also change, and can be longer than expected. I don't know which of these components will be visible or what will be hidden, so the height can't be fixed.

Right now when a components is set as hidden the modal instantly changes its height. I want to use CSS transitions to smoothly change the height of the modal.

I have tried to apply this CSS, without success:

.modal {
    transition: height 1s !important;
}

Surely I'm missing something due to my limited knowledge of the CSS animator. How can I apply a smooth transition?

Ghimbo21
  • 127
  • 11

1 Answers1

1

If you control the elements that inside the modal with display: none, you can not transition smoothly and it is better to hide their with height:0 and To transition smooth modal height, enter the following code:

.modal , .modal * {transition: all 0.2s ease}
Hossein Azizdokht
  • 748
  • 3
  • 17