CODEWITHSUNDEEP
css
MKF
MKF

Reputation: 606

Styling jQuery UI Dialog Heading?

I know how to style the content of dialogs independently of one another by appending a class to the div and then referencing both classes in the CSS .ui-dialog.myClass{}. What I want to do is style the headers of the dialogs independently of one another and I just can't seem to make it work. 

.ui-widget-header.error-dialog{
background: red;
}

.ui-widget-header.success-dialog{
background: green;
}

so on and so forth... Appending the class attached to the div of the dialog of interest doesn't seem to do the job.

<div id="error-dialog" class="error-dialog" title="ERROR"></div>
<div id="success-dialog" class ="success-dialog" title="SUCCESS">
    <p>Habitat classification completed successfully! Your results will be viewable in 10 minutes.</p>
</div>

For example, I'm trying to change the background color of the gray bar that contains ERROR, it is possible I'm just not using the right UI CSS classes: enter image description here

This is what the HTML looks like when I inspect the element, I have a feeling I'm just not styling the right classes. The div highlighted in blue is where the header color is controlled. All classes listed are automatically assigned to the dialog, I have not edited any of them. If you do edit them, it will affect all dialogs, not just the specific dialog I want. enter image description here

Upvotes: 1

Views: 2943

Answers (2)

MKF
MKF

Reputation: 606

So I had my classes mixed around and implemented the dialogClass option when instantiating a dialog instead of specifically put the custom class in the HTML. It is worth noting that dialogClass is a bit of a misnomer as when you set that option, you're actually putting the id of your target dialog, not a class. This appears to work how I want it to.

HTML:

<div id="error-dialog" title="ERROR"></div>
<div id="success-dialog" title="SUCCESS">
    <p>Habitat classification completed successfully! Your results will be viewable in 10 minutes.</p>
</div>

JS:

var errorDialog = $("#error-dialog").dialog({
              autoOpen: false,
              height: "auto",
              width: 1000,
              modal: true,
              dialogClass: 'error-dialog',
              buttons: [{
                  id: "error-ok",
                  text: "Ok",
                  click: function () {
                      errorDialog.dialog("close");
                  }
              }]
          });

      var successDialog = $('#success-dialog').dialog({
          autoOpen: false,
          height: 200,
          width: 400,
          modal: true,
          dialogClass: 'success-dialog',
          buttons: [{
              id: "success-ok",
              text: "Ok",
              click: function () {
                  successDialog.dialog("close");
              }
          }]
      });

CSS:

.error-dialog .ui-dialog-titlebar {
    border: 1px solid black;
    background: red;
}

.success-dialog .ui-dialog-titlebar{
    border: 1px solid black;
    background: green;
}

Upvotes: 1

AndrewG
AndrewG

Reputation: 145

Not sure why you would need the .ui-widget-header. Basically whatever you have as your class you put in front of your css with a . in front in your example it would be:

.error-dialog{
background: red;
}

.success-dialog{
background: green;
}

JS Fiddle: https://jsfiddle.net/9acb42v8/

Upvotes: 0

Related Questions