Styling jQuery UI Dialog Buttons

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!

Nick Beranek · Accepted Answer · 2012-02-23 14:43:45Z

2

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.

answered Feb 23, 2012 at 14:43

Nick Beranek

2,7611 gold badge20 silver badges14 bronze badges

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

6 Comments

user1032531 Over a year ago

Thanks Nick. Your right about #dialog-deleteListRecord button css not being inherited, and I fixed that.

user1032531 Over a year ago

Thanks! It was that dang ui-state-focus!

user1032531 Over a year ago

You think my approach of just removing all the factory jquery UI classes is okay, or is there a better way?

Nick Beranek Over a year ago

Are you removing them from their JS or from their CSS file?

Nick Beranek Over a year ago

I think you should keep the classes, just modify them to suit your needs.

|

Collectives™ on Stack Overflow

Styling jQuery UI Dialog Buttons

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related