I am currently utilizing a Bootstrap (v3) modal for the login screen on my website. Within this login screen, there is a "password forgotten" button that triggers a simple jQuery function to hide the main login form and display the forgotten password form.
The issue I am facing is that the forgotten password form is slightly shorter in height than the login form, causing the modal to resize abruptly. To resolve this, I attempted to implement a CSS transition on the modal height to create a smoother resizing effect.
Unfortunately, all of my attempts to apply the transition have been unsuccessful. I tried setting the transition property on both the .modal class and .modal-dialog, as well as using !important. I even experimented with using jQuery animate, but this resulted in the modal resizing, then further shrinking or growing with the animation, before snapping back to the correct height.
Does anyone have any suggestions on how to address this issue?
(EDIT)
HTML:
<div class="modal fade" id="login" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title">Login</h3>
</div>
<div class="modal-body">
<div class="default">
<h2>Welcome back!</h2>
<div class="form">
<form id="loginform" method="post" action="php/login-processor.php">
<input type="email" name="email" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<input type="submit" value="Log in" class="button button-red" />
</form>
</div>
<p class="link" id="topass">I forgot my password</p>
</div>
<div class="forgotpass hidden">
<h2>Request a new password</h2>
<div class="form">
<form id="passforgottenform" method="post" action="php/password-forgotten-processor.php">
<input type="email" name="email-forgot-password" placeholder="Enter your email address" />
<input type="submit" value="Request" class="button button-red" />
</form>
</div>
<p class="link" id="back">< Back to the login screen</p>
</div>
</div>
</div>
</div>
</div>
jQuery:
$("#topass").click(function(){
$(".default").addClass("hidden");
$(".forgotpass").removeClass("hidden");
});
$("#back").click(function(){
$(".default").removeClass("hidden");
$(".forgotpass").addClass("hidden");
});