How do I align the Delete button all the way to the left and leave the other buttons where they are on the right?

This is my Modal jQuery code.

right now the buttons are aligned on the right side one after the other.
How do I align the Delete button all the way to the left and leave the others where they are on the right?


$( function() {
   $('#ModalForm').dialog(
   {
        modal : true ,
	height: 300,
	width: 500,
        autoOpen : false ,
        buttons  : {
            Delete : function() {
                deleteAnswer();
            } ,
            Cancel : function() {
                closeForm();
            } ,
            Submit : function() {
                addAnswer();
            } 
        }
   });
});

Open in new window

LVL 2
BILL CarlisleAPEX DeveloperAsked:
Who is Participating?
 
SRigneyCommented:
This was a fun one to solve.

I had to add the following CSS after the included jquery ui css

            .ui-button{ float: right }
            .ui-dialog-buttonset { float: none; width : 100%}
            .floatleft { float: left }


Then the dialog is defined as

          $('.demo').dialog(
         {
              modal : true ,
                              height: 300,
                              width: 500,
              autoOpen : true ,
              buttons  : {
                  Delete : function() {
                      deleteAnswer();
                  } ,
                  Cancel : function() {
                      closeForm();
                  } ,
                  Submit : function() {
                      addAnswer();
                  }
              },
              open: function(event, ui) {
                    $(this).parent().find("button:contains(Delete)").addClass("floatleft");
              }
         });


By changing how the float right works you may have to change the order you add your buttons to the dialog in order to get them in the order you want them.  Float rights will work backwards.
0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
Where do I add the
            .ui-button{ float: right }
            .ui-dialog-buttonset { float: none; width : 100%}
            .floatleft { float: left }

Do I add it in style tags?

<style>
            .ui-button{ float: right }
            .ui-dialog-buttonset { float: none; width : 100%}
            .floatleft { float: left }
</style>

0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
This is what I did from your post and it is not working: (I get no errors either)



<script src="/i/libraries/jquery-ui/1.8/ui/minified/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>

<link rel="stylesheet" href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/
redmond/jquery-ui.css" type="text/css" />

<style>
    .ui-button{ float: right }
    .ui-dialog-buttonset { float: none; width : 100%}
    .floatleft { float: left }
</style>

<script type="text/javascript">
var htmldb_delete_message='Would you like to perform this delete action?';
$( function() {
   $('#ModalForm').dialog(
   {
        modal : true ,
      height: 300,
      width: 500,
        autoOpen : false ,
        buttons  : {
            Cancel : function() {
                closeForm();
            } ,
            Submit : function() {
                addAnswer();
            } ,
            Delete : function() {
                deleteAnswer();
            }
        },
        open: function(event, ui) {
         $(this).parent().find("button:contains(Delete)").addClass("floatleft");
        }
   });
});
function openForm(pAnswerID){
   // Prepopulate form using AJAX
    ........................
    ........................
    ........................

  // Open the Form
  $('#ModalForm').dialog('open');
}

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
SRigneyCommented:
I built that with jQuery UI.1.8.4.css

It looks like the css applied changed between 1.7 and 1.8
0
 
SRigneyCommented:
http://jqueryui.com/docs/Upgrade_Guide_184

The upgrade guide talks about changes to the buttons in the dialog between 1.7 and 1.8

you should use the same version of CSS and you have for the jQuery UI javascript.
0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
Thank you! That should do it..
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.