Ad

JQuery Effect Causes Button To Not Be Enclosed By Div

- 1 answer

When using jQuery effect, my div collapses a little as it is sliding and the div coming in is also collapsed a little. It will be a responsive website, so I do not think I should put a width or height. I tried one suggestion I read about using position: absolute, but it did not produce the result I wanted. Is there a way to keep the div from collapsing any? I want each div to look the same when sliding as it does when not sliding.

This fiddle shows the effect and how the divs look when sliding.

CODE:

<div class="well basicInformation">
    <div class="list-group">
        <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#" class="list-group-item active">
            <h4 class="list-group-item-heading">Basic Information</h4>
        </a>
    </div>
    <div class="row">
        <div class="col-md-5">
            <label for="firstname">First Name</label>
            <input type="text" id="firstname" class="form-control" placeholder="First name" ng-model="firstname" required autofocus />
        </div>
        <div class="col-md-2">
            <label for="MI">Middle Initial</label>
            <input type="text" id="MI" class="form-control" ng-model="middlename" />
        </div>
        <div class="col-md-5">
            <label for="lastname">Last Name</label>
            <input type="text" id="lastname" class="form-control" placeholder="Last name" ng-model="lastname" required />
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <label for="address">Address</label>
            <input type="text" id="address" class="form-control" placeholder="Address Line 1" ng-model="address" required />
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <label for="address2">Address 2</label>
            <input type="text" id="address2" class="form-control" placeholder="Address Line 2" ng-model="address2" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <label for="city">City</label>
            <input type="text" id="city" class="form-control" placeholder="City" ng-model="city" />
        </div>
        <div class="col-md-2">
            <label for="address2">Locale/State</label>
            <input type="text" id="locale" class="form-control" placeholder="Locale/State" ng-model="locale" />
        </div>
        <div class="col-md-2">
            <label for="address2">Region</label>
            <input type="text" id="region" class="form-control" placeholder="Region" ng-model="region" />
        </div>
        <div class="col-md-3">
            <label for="address2">Country</label>
            <input type="text" id="country" class="form-control" placeholder="Country" ng-model="country" />
        </div>
        <div class="col-md-2">
            <label for="address2">Postal Code</label>
            <input type="text" id="postalCode" class="form-control" placeholder="Postal Code" ng-model="postalCode" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <label for="phone">Phone (Default)</label>
            <input type="radio" id="radioHome1" /><label>&nbsp;Home</label>
            <input type="radio" id="radioMobile1" /><label>&nbsp;Mobile</label>
            <input type="tel" id="phone" class="form-control" placeholder="Phone" ng-model="contactData" required />
        </div>
        <div class="col-md-6">
            <label for="phone2">Phone 2 (Alternate)</label>
            <input type="radio" id="radioHome2" /><label>&nbsp;Home</label>
            <input type="radio" id="radioMobile2" /><label>&nbsp;Mobile</label>
            <input type="tel" id="phone2" class="form-control" placeholder="Phone 2" ng-model="contactData2" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <label for="email">Email address</label>
            <input type="email" id="email" class="form-control" placeholder="Email address" ng-model="emailAddress" required />
        </div>
        <div class="col-md-6">
            <label for="password">Password</label>
            <input type="password" id="password" class="form-control" placeholder="Password" ng-model="password" required />
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-10 col-md-2">
            <button id="submitBasicInformation" class="btn btn-lg btn-primary btn-block">Next</button>
        </div>
    </div>
</div>

<div class="well faaInformation" style="display: none;">
    <div class="list-group">
        <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#" class="list-group-item active">
            <h4 class="list-group-item-heading">FAA Required Information</h4>
        </a>
    </div>
    <div class="row">
        <div class="col-md-6">
            <label for="federalRegistrationId">Federal Registration ID</label>
            <input type="text" id="federalRegistrationId" class="form-control" placeholder="Federal Registration ID" ng-model="federalRegistrationId" required />
        </div>
        <div class="col-md-6">
            <label for="pilotNumber">Pilot Number</label>
            <input type="text" id="pilotNumber" class="form-control" ng-model="pilotNumber" required />
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-10 col-md-2">
            <button id="submitRegistration" class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
        </div>
    </div>
</div>


var hideoptions = { "direction": "left", "mode": "hide" };
var showoptions = { "direction": "right", "mode": "show" };

$("#submitBasicInformation").on('click', function () {
    $.when($(".basicInformation").effect("slide", hideoptions, 1250)).then(function (data, textStatus, jqXHR) {
        $(".faaInformation").effect("slide", showoptions, 1250);
    });
});
Ad

Answer

It looks like your animation is adding style attributes during the animation. You can see this if you slow down the animation and inspect the element. It's adding a static height and width during the animation. I was able to fix the height and width by adding this to your .faaInformation css

height: auto !important;
width: auto !important;
Ad
source: stackoverflow.com
Ad