Using external CSS in jQuery UI dialogs

Question

Across my application, I need to load a content block into a jQuery UI dialog. Each content block must be CSS-styled individually.

I can only think of two solutions, neither of which is ideal:

Use jQuery.load() to load a partial HTML page (i.e. no <head> or <body> tags) containing the content block inside the dialog. The external CSS file would then dynamically be appended using jQuery. The dialog can automatically resize to fit the content.
Use an iframe to load an entire page, which contains the content block and the external CSS references all in one page. But the dialog can't automatically resize.

Are there any better solutions?

kleinohad · Accepted Answer · 2011-07-05 19:32:38Z

4

Hi in that case you can put the style in the top of the page you are loading inside a style tag <style></style> instead of using css file

answered Jul 5, 2011 at 19:32

kleinohad

5,9202 gold badges29 silver badges35 bronze badges

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

1 Comment

It isn't a perfect solution, but it's not a perfect world. Inline styles are the way to go here. Thanks.

thecodeparadox · Accepted Answer · 2011-07-05 19:35:05Z

0

you can add css properties to contents using jQuery css() also

answered Jul 5, 2011 at 19:35

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges