JQuery UI Dialog show effect invalidate font-size

Question

The dialog creation is:

$(document).ready(function () {
    $(".jym").dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        closeOnEscape: false,
        height: 100,
        width: 100,            
        open: function () {
            $('.ui-dialog').css("font-size", "14px");              
        },
        show: 'puff'
    });
});

Now the font-size of the dialog window is taking the default font-size of the page which is 17.5px. But if I remove the show then it is taking 14px.

What I am doing wrong?

I am using jQuery UI 1.8.18 and jQuery 1.7.1. If I use slide, blind, explode, clip, drop, fade, effect instead of puff then it is working. Also with scale it is not working.

Brian · Accepted Answer · 2012-03-26 19:10:04Z

2

The "puff" effect causes the entire element to "zoom" or "scale" up in size momentarily. I believe what you're seeing is that the style for the font size is probably being overwritten during the animation. Using .css('font-size" ... will actually put a style="font-size:14px" onto the element. The animation uses that same style attribute for it's animation. So when it finishes the animation, and removes its modified font size, the element will have no font size and inherit that of the page.

Move your font-size 14px into a CSS file instead and your problem will be fixed.

answered Mar 26, 2012 at 19:10

Brian

3,02321 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery UI Dialog show effect invalidate font-size

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related