Question

I have forked an example on jsfiddle that has tabs on a dialog box http://jsfiddle.net/didierg/dNyYQ/ and i made a few changes.First,i added a title bar, http://jsfiddle.net/wwDpD/1/ and then set draggable to true http://jsfiddle.net/wzF5Y/2/

The final fiddle surprisingly works on jsfiddle http://jsfiddle.net/wzF5Y/2/ but when i run the example of my browser FF 12.0,the dialog is hidden above the top most div;that is above the open dialog button.

What could i be missing?.

Image:

Answer 1

It seems that the dialog (as well as the overlay) is being constrained to the div with id="force". Firefox tries to keep the dimensions of the div as small as possible given the size of its child elements. Thus, when you try to drag the dialog, it gets pushed up inside the force div, since the div only covers the top of the page. In the other browsers, the dimensions of the force div are maximized, so you can drag the dialog anywhere on the page. You can get the same behavior as with other browsers by adding the following CSS:

#force {
    height: 100%;
    width: 100%;
}