tonyhhisc
asked on
jQuery Dialog Positioning inside Parent Element
I'm using jQuery UI to create a dialog window but am having trouble positioning it inside a parent div.
So far, I've gotten it to place itself inside the parent div, but now I want it positioned in the bottom-right corner of the div. The default value "center" keeps overriding it. I'm probably just doing it in the wrong format.
Here's what I've got so far:
<html>
<body>
<script>
$(function() {
$("#dialog").dialog( { width: 200, height: 100 }).parent().position({ my: 'bottom right', at: 'bottom right', of: '#fppic' });
});
</script>
<style>#parent { border: solid 1px #ddd; width: 500px; height: 400px; }</style>
<div id="parent">
</div>
<div id="dialog">Test Content</div>
</body>
</html>
You may also need the attached files for testing. Thanks for your help!
jquery-1.4.2.min.js
jquery-ui-1.8.6.custom.min.js
jquery-ui-1.8.6.custom.css
So far, I've gotten it to place itself inside the parent div, but now I want it positioned in the bottom-right corner of the div. The default value "center" keeps overriding it. I'm probably just doing it in the wrong format.
Here's what I've got so far:
<html>
<body>
<script>
$(function() {
$("#dialog").dialog( { width: 200, height: 100 }).parent().position({ my: 'bottom right', at: 'bottom right', of: '#fppic' });
});
</script>
<style>#parent { border: solid 1px #ddd; width: 500px; height: 400px; }</style>
<div id="parent">
</div>
<div id="dialog">Test Content</div>
</body>
</html>
You may also need the attached files for testing. Thanks for your help!
jquery-1.4.2.min.js
jquery-ui-1.8.6.custom.min.js
jquery-ui-1.8.6.custom.css
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you that worked!
But of course, there's always something else. For some reason the height won't work in IE. Is this a permanent bug or can it be fixed? Please checkout question ID# 26610970 if you have time. Thank you!!
But of course, there's always something else. For some reason the height won't work in IE. Is this a permanent bug or can it be fixed? Please checkout question ID# 26610970 if you have time. Thank you!!
ASKER
Thank you!
I think you want something like this:
$("#dialog").dialog( {width: 200, height: 200, position: ['right','bottom'] } );
As far as I can tell, the jQuery UI dialog widget does not support putting the dialog *inside* of a parent element unless that parent element is actually an iframe loading another page. The dialog box appears overtop of all other page content, positioned in the viewport wherever you specify (in this case, the bottom right hand corner).