Question

I am using datatable and dialog on same page, i would like to apply different themes for each. How do i achieve it? Currently my datatable theme is applied for both, how do i scope dialog.

Below is my dialog code

   $('#newVisit').dialog({
                modal: true,
                autoOpen: false,
                draggable: true,
                width: 'auto',
                height: 'auto',
                title: "Add New Visit"

//                    open: function () {
//                        $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
//                    }


            });                    //.parent(".ui-dialog").wrap("<div class='theme-smoothness'></div>");

I have tried wrapping but didn’t succeed.
any idea would be appreciated.

Answer 1

have you tried using css specificity to define styles for the default jquery ui dialog styles? try defining custom styles for these classes (based on dialog dynamic class insertion):

    <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>

you can see default layout/style reference here:

click on “theming”