CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
Ceejay
Ceejay

Reputation: 7257

How to change the position of the JQuery dialog box

I am trying to change the position of the jQuery dialog box by giving the position through the css.

But when I apply the changes in .css file & refresh the page, the dialog box is not appearing in the given position.

I am using jQuery dialog

Please suggest how to change the position.

I tried this css in jquery-ui.css, but didn't work:

.ui-dialog{
    position:absolute;
    top:161px;
    left:842.5px;
}

Upvotes: 0

Views: 15203

Answers (6)

Andre Van Zuydam
Andre Van Zuydam

Reputation: 799

I need to add to the accepted answer, if you are looking for some type of relative positioning in an element which I was then maybe this may help you get to your solution quicker:

//Considering that you have instantiated a jquery-ui dialog with the following
$('#someDialog').dialog({position: {my: 'top', 
                                    at: 'left top', 
                                    of: '#content'}, 
                         appendTo: '#content'});

The above code says that we are create a dialog in the div with id "content". How could we then set the position of the dialog relative to the "#content" element ?

//move the dialog to x = 200, y = 50 relative to #content
$('#someDialog').dialog({position: {my: 'left+200 top+50', 
                                    at: 'left top', 
                                    of: '#content'}, 
                         appendTo: '#content'});

The above code would position the dialog relative to content from left and top +200 px and +50px, the position elements need to tie in with the "at" parameter 'left top' or things won't work. It is documented in the documentation but getting it to work is something else, obviously you could substitute "my" with dynamic inputs. I am using the dragstop event to feed back to my application where the dialogs are and then restoring the dialogs later.

Upvotes: 0

Premshankar Tiwari
Premshankar Tiwari

Reputation: 3106

Inspect your .ui-dialog to see whether it is taking your applied CSS or not. Otherwise try giving !important at the end of your styles

.ui-dialog{
    position:absolute;             // not required important its already absolute
    top:161px !important;         // provide !important
    left:842.5px !important;       // provide !important
}

you can also provide your positions with position property of the dialog .. jQuery dialog position

Upvotes: 0

Roy M J
Roy M J

Reputation: 6938

You do not need to go with CSS option to over-ride the default position.

Jquery Dialog already has this option.

Eg : 

$("#dialog").dialog("widget").position({
   my: 'left',
   at: 'right',
   of: target
});

Refer : http://jqueryui.com/position/

Upvotes: 4

TimSPQR
TimSPQR

Reputation: 2984

Here is some code that I have used in the past.

var $dialogpopup = $( "#popupcommdiv" ).dialog({
                                                autoOpen: false,
                                                  height: 400,
                                                   width: 600,
                                                position: {my: "top middle",
                                                           at: "top middle",
                                                           of: "#header"},
                                                   title:"Message"});

Upvotes: 2

sidney
sidney

Reputation: 2714

As you wish to change the location with css: 

.ui-dialog .ui-widget .ui-widget-content .ui-corner-all .ui-front .ui-draggable .ui-resizableIn {
    position: absolute;
    height: auto;
    width: 300px;
    top: 21px;
    left: 147px;
    display: block;
}

Maybe that only .ui-dialog will do the trick, please try this.

Upvotes: 1

Alvaro
Alvaro

Reputation: 41595

Using the position option available.

Or, if you want to apply another class with absolute position, for example, you could use the dialogClass option:

$("#yourDialog").dialog({
    dialogClass: 'myPosition'
});

Upvotes: 1

Related Questions