CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
CommanderData
CommanderData

Reputation: 585

jQuery UI dialog goes offscreen when using position fixed

I am using jQuery UI to display a dialog and I want it to always stay at the same position regardless of the scroll state. So I just added the css code

.ui-dialog {
    position: fixed;
}

Now if you drag the dialog to the bottom, it is possible to move it offscreen so that it is completely gone. Anyone knows how to prevent that? See this fiddle for a demonstration: https://jsfiddle.net/d0pgfwk7/

Upvotes: 0

Views: 1257

Answers (2)

CommanderData
CommanderData

Reputation: 585

I finally fixed my problem. The solution was not to use the draggable setting of the dialog but to use the widget itself. So my code now looks like this:

$("#dialog").dialog(
    {
      draggable: false,
      dialogClass: 'my-dialog'
    }
});
$('.my-dialog').draggable({
    containment: 'window'
});

Upvotes: 2

shv22
shv22

Reputation: 690

From what I can get you are saying the jquery dialog box is draggable. If this is the case it is pretty simple fix just use 

 draggable: false

See the fiddle here https://jsfiddle.net/d0pgfwk7/

EDIT : Please look at fiddle here

http://jsfiddle.net/tj_vantoll/LZ9SR/

For more details refer this link https://bugs.jqueryui.com/ticket/8741

Upvotes: 0

Related Questions