Question

I’ve been trying to style a jQuery UI dialog for hours, and am going around in circles. I am able to get my desired look by manually adding buttons to the dialog. See the following link for a working example. This Works

Now, I want to do it the right way and add buttons per the jQuery UI manual. There are about a billion classes which are automatically added to the buttons, so I remove these factory classes, and then add a couple of custom classes.

$(this).dialog("widget").find('button').removeClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only').parent().removeAttr('class').parent().removeAttr('class');
...
buttons     : [
{text:'YES, DELETE IT',class:'newButton red',click: function() {alert("Delete Record");$(this).dialog("close");}},
{text:'CANCEL',class:'newButton gray',click: function() {$(this).dialog("close");}}
]

See the following link for my fail attempt This doesn’t quite work

First of all, the buttons don’t show the color image. Then I click anywhere on the dialog, and the image appears on the button. If the dialog is closed then opened, the dialog becomes taller. On top of that, the buttons are squished together, but I probably can figure that out.

Please help me find my error of my ways!

Answer 1

Here’s what’s happening:

On page load, your red button has a class of ui-state-focus. When you click anywhere on the page, that button loses that class, therefore displaying the red background image. Another thing I have noticed is that the button is inheriting the following:

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: Verdana,Arial,sans-serif;
  font-size: 1em;
}

That could explain why the text is much larger. I also noticed that your buttons are NOT inheriting this CSS from your first test:

#dialog-deleteListRecord button {
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
  padding: 3px 8px;
  color: white;
  font-size: 12px;
  font-weight: bolder;
  font-family: Arial, Helvetica, sans-serif;
}

I hope that this gives you direction to solve your issue.