CODEWITHSUNDEEP
jquery-uitwitter-bootstraptwitter-bootstrap-3
wphampton
wphampton

Reputation: 534

How can I keep correct size of Bootstrap alerts while using jQuery UI effects?

I'd like to keep the proper size of the Bootstrap alert during a jQuery UI effect, like "shake".

What seems to be happening is that during the effect the div containing the alert gets a new height and width style applied that are smaller than they should be. Once the effect is complete everything looks normal again.

Any thoughts?

Fiddle me this

$(document).ready(function(){
    $('a').click(function(){
        // or try "bounce", "slide", "drop"...probably others.
        $( ".alert" ).effect( "shake" );
    })
});

Upvotes: 1

Views: 183

Answers (1)

Schmalzy
Schmalzy

Reputation: 17324

This seems to have something to do with box-sizing: border-box changing this to box-sizing: content-box seems to resolve the issue. DEMO

.alert {
    box-sizing: content-box !important;
}

There are a few other work-arounds listed in the links below...

Bug logged with jQuery UI

Related Question from Stack Overflow

Upvotes: 1

Related Questions