I have been struggling to customize a jQuery UI dialog for quite some time now, and it feels like I'm going in circles. Despite achieving the desired look by manually adding buttons to the dialog as demonstrated in this working example.
However, my goal is to follow the proper method by adding buttons according to the jQuery UI manual. Removing the numerous factory classes automatically added to the buttons, I tried to add a few custom classes instead.
$(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");}}
]
You can view my unsuccessful attempt at the following link: This doesn't quite work.
Initially, the buttons lack the color image until clicked elsewhere on the dialog, causing the image to appear. Additionally, when reopening the dialog, its height increases unexpectedly. While the buttons also seem squished together, that issue may be resolved with further troubleshooting.
Your assistance in identifying the mistakes in my approach would be greatly appreciated!