I've created a container that is meant to slide out from the bottom of a site when something isn't saved (to enable batch saving). I have my content centered, using flex mode using this css:

.save-footer {
    z-index: 9998; position: fixed; bottom:0; height:3em;
    background: rgb(255, 247, 125);
    color: black;
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:0.5em;
}

. The problem is when I use jQuery.slideDown(), it doesn't respect the flex mode centering, and ends up going to the left (see jFiddle here). When it's done it centers back, because of a callback function I got from another SO answer.

Is there a way to animate that slide without having losing the alignment? Is there a better way to implement this banner entirely? (I'm not primarily a front-end developer...)

Note: If you use slideToggle instead of slideDown, subsequent slides are aligned properly.

I've created a container that is meant to slide out from the bottom of a site when something isn't saved (to enable batch saving). I have my content centered, using flex mode using this css:

.save-footer {
    z-index: 9998; position: fixed; bottom:0; height:3em;
    background: rgb(255, 247, 125);
    color: black;
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:0.5em;
}

. The problem is when I use jQuery.slideDown(), it doesn't respect the flex mode centering, and ends up going to the left (see jFiddle here). When it's done it centers back, because of a callback function I got from another SO answer.

Is there a way to animate that slide without having losing the alignment? Is there a better way to implement this banner entirely? (I'm not primarily a front-end developer...)

Note: If you use slideToggle instead of slideDown, subsequent slides are aligned properly.

• javascript
• jquery
• html
• css

2 Answers 2

jQuery shows and hides item by changing the display, usually between block and none. This interferes with the display: flex, that you use for centering. A simple "low-tech" solution is wrapping the flexbox container with another div (save-footer-container), and showing / hiding said container:

.save-footer-container {
  display: none;
  z-index: 9998;
  position: fixed;
  bottom: 0;  
  width: 100%;
}

.save-footer {
  display: flex;
  height: 3em;
  background: rgb(255, 247, 125);
  color: black;
  align-items: center;
  justify-content: center;
  padding: 0.5em;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="$('.save-footer-container').slideDown('medium')">
  Popup
</button>
<div class="save-footer-container">
  <div class="save-footer slider">
    <div class="div-section">
      <p id="save-footer-text">Your changes have not been saved.</p>
    </div>
    <div class="div-section">
      <button onclick="Save()" class="btn btn-info">Save</button>
    </div>
  </div>
</div>

Rewrote it so it toggles up and down smoothly. The toggling is possible with toggleClass() jQuery method and CSS transitions. The 2 states (ex. on and off) are possible by toggling the .off class. The animation of up and down are possible by setting a transition on each state (i.e. on = .save-footer and off = .off).

FIDDLE

SNIPPET

.save-footer {
  z-index: 9998;
  position: fixed;
  bottom: 0em;
  height: 3em;
  background: rgb(255, 247, 125);
  color: black;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em;
  transition: all .7s ease-in;
}
.off {
	height:0;
	visibility:hidden;
	transition: height .5s ease-out, visibility .3s linear 0s;
	}

<script src="https://ajax.aspnetcdn./ajax/jquery/jquery-2.2.2.min.js"></script> 
<button onclick="$('.save-footer').toggleClass('off')">
  Popup
</button>

<div class="save-footer slider off">
  <div class="div-section">
    <p id="save-footer-text">Your changes have not been saved.</p>
  </div>
  <div class="div-section">
    <button onclick="Save()" class="btn btn-info">Save</button>
  </div>
</div>