jquery ui css does not appear when changes from display:none to display:inline

Question

High everyone,

In my web-based app, I have a div that is usually display:none so that it is hidden and doesn't take up any space. When something happens, I want the div to appear with the styling for the class ui-state-highlight ui-corner-all and i will put in some dynamic content. So i give this hidden div these classes initially. The problem is when I show the div with some dynamic content, the styling for the classes i just mentioned is not there.

See this fiddle which illustrates the problem: http://jsfiddle.net/qR8gK/

The desired outcome is the div that appears when you click the button has the same styling as the one that is visible initially. Does anyone know how I can do this??

Thanks!

check this out jsfiddle.net/qR8gK/1

Wasim Karani
– Wasim Karani

2012-08-02 12:37:41 +00:00
Commented Aug 2, 2012 at 12:37 — Wasim Karani
– Wasim Karani, Commented Aug 2, 2012 at 12:37

Shyju · Accepted Answer · 2012-08-02 13:02:01Z

1

Call the show() method to make it visible.

$('#a').button().click(function() {
    $('#dynamic').html('<p>some dynamic content</p>').show();
});

working sample : http://jsfiddle.net/qR8gK/16/

answered Aug 2, 2012 at 13:02

Shyju

220k106 gold badges421 silver badges499 bronze badges

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

Comments

valscion · Accepted Answer · 2012-08-02 12:39:08Z

1

Just use .show() instead of manually setting the css display setting.

$('#a').button().click(function() {
    $('#dynamic').show().html('<p>some dynamic content</p>');
});

answered Aug 2, 2012 at 12:39

valscion

5904 silver badges13 bronze badges

Comments

Pradeeshnarayan · Accepted Answer · 2012-08-02 15:35:30Z

1

The actual problem in your code was because of the paragraph tag. Remove the <p> and try.

$('#a').button().click(function() {
    $('#dynamic').css('display', 'inline').html('some dynamic content');
});

sample : http://jsfiddle.net/qR8gK/19/

edited Aug 2, 2012 at 15:35

answered Aug 2, 2012 at 12:46

Pradeeshnarayan

1,23510 silver badges21 bronze badges

Collectives™ on Stack Overflow

jquery ui css does not appear when changes from display:none to display:inline

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related