JQuery UI dialog external css

Question

I am using http://jqueryui.com/demos/dialog/

$('#add_remarks').click(function(){
    $( "#remark-form" ).dialog( "open" );
});
$( "#remark-form" ).dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        'Add Remarks': function() {
                alert('ok')
                },
                error: function(){
                    //alert('error');
                    //location.reload();
                }
            });
        },
        Cancel: function() {
            $(this).dialog( "close" );
        }
    },
    close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
    }
});

I would like to specify an external css class so I can define the width and the height of the remark-form from an external css file.

Do you know how to do that?

If the external CSS file is loaded into the site, you can still reference the selectors contained within the file as you normally would... — Jake Toolson
– Jake Toolson, Commented Apr 10, 2012 at 20:21
I'm not sure I understand what the problem/question is here. — j08691
– j08691, Commented Apr 10, 2012 at 20:22
I answered your question and then realized there's really no need for doing this...so really I don't get your question either. Haha! — wzub
– wzub, Commented Apr 10, 2012 at 20:25

wzub · Accepted Answer · 2012-04-10 20:21:35Z

1

You can use addClass to..well, add a class to the div on which you're calling the .dialog. And then you can style that anyway you wish. So your code would become

$( "#remark-form" ).addClass('your_class').dialog({
autoOpen: false,
modal: true,
buttons: {
    'Add Remarks': function() {
            alert('ok')
            },
            error: function(){
                //alert('error');
                //location.reload();
            }
        });
    },
    Cancel: function() {
        $(this).dialog( "close" );
    }
},
close: function() {
    allFields.val( "" ).removeClass( "ui-state-error" );
}});

answered Apr 10, 2012 at 20:21

wzub

3241 silver badge6 bronze badges

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

1 Comment

Salman Arshad Over a year ago

Plus you need to pass width: 'auto', height: 'auto' to the dialog constructor.

Ram · Accepted Answer · 2012-04-10 20:31:10Z

1

you can use dialogClass:

 $( "#selector" ).dialog({ dialogClass: 'myClass' });

answered Apr 10, 2012 at 20:31

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

asdf_enel_hak · Accepted Answer · 2012-04-10 20:26:47Z

from link you provided at theming tab, rendered html codes will look like:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>

so as you have #remark-form selector for your item, all you need:

#remark-form .ui-dialog { height: 100px !impportant; width 100px !important}

then you could this style code to head section of your html document or external css then you point it

Caio Felipe Giasson · Accepted Answer · 2012-04-10 20:30:26Z

if you want to add an CSS after the loading of the page (if you have a dynamic CSS file, for example), you can use

function includeCSSFile( file_url ) {
    var cssFile = document.createElement('link');
    cssFile.setAttribute('type', "text/css" );
    cssFile.setAttribute('rel', "stylesheet" );
    cssFile.setAttribute('href', file_url );
    document.getElementsByTagName("head").item(0).appendChild(cssFile);
}

on your main javascript file, so anywhere you want to load another css you have to call the function like

includeCssFile ( 'http://fonts.googleapis.com/css?family=Bad+Script' )

and after that you can use an $(selector).addClass(...) on your code.

i'm using it on a site and its working fine, where the link_url is given by a PHP script, and sometimes it is written dynamically...

Collectives™ on Stack Overflow

JQuery UI dialog external css

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related