Daniel Anderson Daniel Anderson - 2 years ago 126
Javascript Question

Setting position of JQuery dialog buttons causes buttonpane background color issue

I have created a JQuery dialog in my web page, and in it I have set up a couple of buttons. I wanted to ensure that the "Register Me" button appeared in the left corner of the buttonpane, and that the "Maybe Later" button appeared in the right corner, so I put in some code to handle this. Here's the complete code of the


create : function(ev, ui) {
$(this).parent().find('.ui-dialog-buttonpane').css('background-color', '#ffffff;');
appendTo: "form",
autoOpen: false,
show: { effect: "fadeIn" },
hide: { effect: "fadeOut" },
modal: true,
draggable: false,
minWidth: 750,
minHeight: 400,
resizable: false,
dialogClass: "no-close",
class: "firstButton",
text: "Register Me",
click: function () {
url: "/services/register.asmx",
timeout: 30000,
type: "POST",
data: $('#modalform').serialize(),
dataType: 'json',
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("An error has occurred making the request: " + errorThrown)
success: function (data) {
class: "lastButton",
text: "Maybe Later",
click:function () {

As you can see from the button declarations, I added a class for each one that floats the button to the left or right as desired. This all works, and the buttons appear on the left and right corners of the dialog as I expected.
The problem is that as long as I don't try to position the buttons, they appear on a white background as part of the "buttonpane" of the dialog. The moment I set the positioning of the buttons though, the background of the underlying buttonpane goes transparent, so now the buttons appear to float below the dialog, like this:

What I see with button styling

If you look at the dialog code, you'll see that I tried to resolve this by intercepting the
event in the dialog declaration to override jquery styling:

$(this).parent().find('.ui-dialog-buttonpane').css('background-color', '#ffffff;');

This, however, doesn't seem to work. So I decided to try to change it after creation of the dialog by adding this code:

$('.ui-dialog-buttonpane').css('background-color', 'white');

No joy on this either. I've tried setting up code in my stylesheet to achieve this as well, using this:

.ui-dialog-buttonpane {
background-color:#ffffff !important;

It also has no effect. Can anyone tell me what I'm missing here, because I'm out of ideas. Thanks!

Answer Source

Without an example that replicates the issue is tricky, but I guess what you need is

Clear the Floats

Try add this on your CSS:

.ui-dialog-buttonpane:after {
  content: "";
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download