CODEWITHSUNDEEP
jqueryjquery-ui
user2444474
user2444474

Reputation: 573

How to change the jquery UI dialog button position on top of form?

How to change the button position to top of the page ? I have tried soo many examples, but those are only displaying in left ot right.but i want to display the button on top of the form .

      $( "#popup" ).click(function() {
$( "#dialog-form" ).dialog( "open" );
});

$( "#dialog-form" ).dialog({ 
 autoOpen: false,
 height: 300,
 width: 350,
 modal: true,
 buttons : {
 "search" : function(){
 $(this).css({position:top})
 },
 "use selected" : function(){}
 }

 });

Upvotes: 1

Views: 4343

Answers (3)

Biff MaGriff
Biff MaGriff

Reputation: 8231

I like Cliff's answer but I would use .before() instead of .prepend() as this will keep your buttonpane and content elements at the same level.

$('#dialog-form').dialog({
    open: function (event, ui) {
        $(this).before($(this).parent().find('.ui-dialog-buttonpane'));
    },
    ...

I would also then change the border of the button pane. (depends on your theme)

Css 

.ui-dialog .ui-dialog-buttonpane {
    border-top-width:0px; border-bottom-width:1px;
}

Upvotes: 1

Cliff Liu
Cliff Liu

Reputation: 196

Please try to prepend the button element position while opening dialog , just like the code snippet below

$('#dialog-form').dialog({
  open: function (event, ui) {
    $(this).prepend($(this).parent().find('.ui-dialog-buttonpane'));
  },
  ...

Upvotes: 2

drizzie
drizzie

Reputation: 3361

Check out this fiddle

Essentially, your CSS:

div.ui-dialog-buttonpane {
    position: absolute;
    /* height + padding + margin of header */
    top: 41px;
    /* play around with this setting to your liking. */
    width: 97%;
    /* use a more specific selector to avoid using !important */
    padding: 0 !important;
}
/* for a bottom border use this */
div.ui-dialog-buttonpane {
    /* use a more specific selector to avoid using !important */
    border-width: 0 0 1px 0 !important;
}

Upvotes: 0

Related Questions