Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
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
Medium Priority
?
508 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 15

Accepted Solution

by:
SRigney earned 500 total points
ID: 33578651
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
ID: 33579336
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
ID: 33579582
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 15

Expert Comment

by:SRigney
ID: 33579685
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 500 total points
ID: 33579747
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
ID: 33607988
Thank you! That should do it..
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

618 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