Solved

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

Posted on 2010-09-01
6
499 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:bcarlis
  • 3
  • 3
6 Comments
 
LVL 15

Accepted Solution

by:
SRigney earned 125 total points
Comment Utility
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
 
LVL 2

Author Comment

by:bcarlis
Comment Utility
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
 
LVL 2

Author Comment

by:bcarlis
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 15

Expert Comment

by:SRigney
Comment Utility
I built that with jQuery UI.1.8.4.css

It looks like the css applied changed between 1.7 and 1.8
0
 
LVL 15

Assisted Solution

by:SRigney
SRigney earned 125 total points
Comment Utility
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
 
LVL 2

Author Closing Comment

by:bcarlis
Comment Utility
Thank you! That should do it..
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now