The height transition on a Bootstrap modal is not functioning as expected

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">&times;</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">&lt; 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");
});

Answer №1

Got it! All sorted now.

Using jQuery:

$(".forgotpass").hide();

$("#topass").click(function(){
    $(".default").hide();
    $(".forgotpass").fadeIn();
    $(".modal-content").addClass("short");
});

$("#back").click(function(){
    $(".forgotpass").hide();
    $(".default").fadeIn();
    $(".modal-content").removeClass("short");
});

For SCSS styling:

.modal-content {
    height: 415px;
    transition: height 0.3s cubic-bezier(.25,.8,.25,1);

    &.short {
        height: 340px;
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting border styling problems on an iPad for a table

I'm encountering a CSS issue specifically on iPad devices when rendering the HTML page. Oddly enough, everything appears fine on other browsers. The problem I'm facing is a small space between the cells in my tables as shown in this image: Stran ...

Is there a way to implement an onclick event on a specific line of text that triggers a popup box only when the text is clicked, without the popup appearing automatically when

I received assistance from a fellow user to customize a popup that turned out great. However, I'm having trouble getting the onclick function to work properly so that the popup only appears when the phone number is clicked. Ideally, I want the phone n ...

How can the entire menu be closed in Bootstrap 5 when clicking on a link or outside of the page?

I'm currently utilizing BootStrap 5 for constructing my webpage. Within my page, I have a NavBar Menu containing various links. <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

Is it possible to change button behavior based on input values when hovering?

Currently, I am attempting to create a webpage where users can input two colors and then when they press the button, a gradient of those two colors will appear on the button itself. <!doctype html> <html> <head> <script src=&apos ...

Reusing Form HTML Elements Based on Conditions

Here's a scenario where depending on the value of the $mode variable, either 'page' or 'popup' will be returned by a conditional. This choice will determine which HTML markup is displayed. Both scenarios contain a form element wit ...

Analyzing JSON data and creating a tailor-made array

My Dilemma { "rowId": "1", "product_name": [ "Item A", "Item B", "Item C", "Item D", "Item E" ], "product_tag": [ "123456", "234567", "345678", "456789", "5678 ...

How can CSS be utilized to style the visited links that are hovered over

Is there a way to change the font color specifically for visited hyperlinks that are being hovered over by the mouse? I am trying to achieve this: a:visited:hover {color: red} ...

Using AJAX to submit a form and retrieve response data in Javascript

After successfully getting everything to post correctly, I encountered a problem with this script. It keeps loading the content into a new page. Could it be related to the way my php file returns it using "echo(json_encode($return_receipt));"? <s ...

Can a CSS3 filter be utilized to transform gradient colors into solid colors?

I have an interesting scenario where I am using a -webkit-mask with a radial-gradient to create small dots on a background image. These dots are transparent, allowing the background image to show through. However, each dot has a gradient color within it. ...

Exploring the jQuery syntax within Twitter Bootstrap JS files

Questioning the syntax used in Twitter Bootstrap's JS files. Take for example this snippet from bootstrap-dropdown.js: !function ($) { /* ... */ /* Querying the Standard Dropdown Elements -- Inquiry Code * ================================= ...

Element does not cross both explicit and implicit columns

When working in a grid container with only 1 column and 1 row, if there is an implicit column in the first row, how can an element in the second row (as shown by the green column in the example) span across both the explicit and implicit columns? I appreci ...

The concept of setting a value is not defined in JavaScript when compared to

Within my primary python script, the following code snippet is present. @app.route('/accounts/test/learn/medium') def medium(): word = random.choice(os.listdir("characters/")) return render_template('accounts/test/medium.html', word=w ...

The error message "Angular formGroup requires a FormGroup instance. Kindly provide one."

I used angular reactiveforms to create a form. The default data is successfully printed on the form, however, I am facing an error in the console that says "formGroup expects a FormGroup instance. Please pass one in." Can someone guide me on how to resolve ...

Tips for responding to and disabling a specific button in Vuetify.js after clicking the follow or unfollow button

I have a situation where I need to implement a functionality for a series of buttons with follow and unfollow statuses. When a user clicks on any button, I want the status to change after a brief delay and deactivation, followed by reactivation. For instan ...

Having trouble with the Semantic UI popup not showing div content correctly? Need to display table row data as well? Let's troub

Having trouble with this semantic-ui code popup error. Can anyone provide a solution? $(document).on('click', 'table td', function() { $(this) .popup({ popup: $('.custom.popup') }); }) ...

Using CSS3 gradient in grey instead of white

I came across an amazing example by Chris Coyier showcasing a "read more" button. I attempted to replicate this by creating a simple fadeout effect from white to transparent, but unfortunately, I ended up with a grey gradient instead. You can view my atte ...

Developing Angular 6 for dynamic HTML navigation tabs

Being new to Angular 6, I recently created tabs in HTML and now need to convert them into Angular 6 while also making them dynamic. Here is the original HTML code: <ul class="nav nav-tabs side_nav" role="tablist"> <li role="presentation" class= ...

Move content off the screen using CSS3 translation

Throughout various projects, I have encountered the need to make elements on a webpage translate out of view (essentially making them fly out of the document). The idea was that by simply adding a class to the element, the CSS would take care of the animat ...

Using Scrollspy with sticky-top in Bootstrap allows for easy navigation and fixed positioning of elements

I'm attempting to recreate a layout similar to the privacy policy page on Twitter. On this page, you'll notice that it is divided into sections with a left menu corresponding to each section. As you scroll down the page, the menu sticks to the ...

Using @font-face with Rails version 2.3.8

Hello, I am having trouble including a custom font in my Rails application. I am currently using Rails 2.3.8. I have placed my font folder in the public folder and below is my CSS code. However, it seems to not be working. Can anyone provide some assistan ...