CSS and Jquery: Trying to add CSS class to dialog box

Question

I am trying to add a CSS class .dialogStyle to a dialog box, but it ain't working for some reason.

<!doctype html>
<head>
  <meta charset="utf-8" />
  <title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <style>
.dialogStyle .ui-dialog { font-size: 62.5%; 
                          background-color: red;
                        }


  </style>

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <script>
  $(document).ready(function() {
    $( "#update-dialog" ).dialog({
      autoOpen: false,
      dialogClass: 'dialogStyle',
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Update": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
    $(".update-button").click(function () {
        $("#update-dialog").dialog("open");
  });
});
  </script>
</head>
<body>

<div id="update-dialog" title="Update COMMON_NAME">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<button class="update-button">Update COMMON_NAME</button>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>


</body>
</html>

This does not apply CSS to the ui-dialog as hoped. However, when I replace ".ui-dialog" with ".ui-dialog-titlebar", it is able to style atleast something (the titlebar).

 <style>
    .dialogStyle .ui-dialog-titlebar { font-size: 62.5%; 
                  background-color: red;
                }

 </style>

Why is dialogClass not work for .ui-dialog, but for .ui-dialog-titlebar? According to here (see section titled "Theming"), both .ui-dialog and .ui-dialog-titlebar are classes of the dialog box.

Arun P Johny · Accepted Answer · 2013-08-28 03:59:54Z

2

Both the classes dialogStyle and ui-dialog are applied to the same element. see the dialog class attribute ui-dialog ui-widget ui-widget-content ui-corner-all dialogStyle ui-draggable ui-dialog-buttons

Try

.dialogStyle.ui-dialog {
    font-size: 62.5%;
    background-color: red;
}

Demo: Fiddle - I haven't fixed the css issues

answered Aug 28, 2013 at 3:59

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

3 Comments

Leon Helmsley Over a year ago

Thanks - it works. But I don't understand why it does - what's the different between ".dialogStyle.ui-dialog" and ".dialogStyle .ui-dialog"?

Arun P Johny Over a year ago

@LeonHelmsley the former looks for an element with class ui-dialog inside an element with class dialogStyle - descedent selector, where as my rule will look for an element having both the classes

Leon Helmsley Over a year ago

Ah, I see. I didn't multiple class selectors were possible like that! For future people having the same troubles, reading this also helped me: css-tricks.com/multiple-class-id-selectors

N8FURY · Accepted Answer · 2013-08-28 04:02:22Z

0

.dialogStyle .ui-dialog { 
 font-size: 62.5% !important; 
 background-color: redb !important;
}

Did you try like this ?

answered Aug 28, 2013 at 4:02

N8FURY

10.1k3 gold badges17 silver badges14 bronze badges

Collectives™ on Stack Overflow

CSS and Jquery: Trying to add CSS class to dialog box

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related