Solved

jQuery Dialog Positioning inside Parent Element

Posted on 2010-11-11
4
1,398 Views
Last Modified: 2012-05-10
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
0
Comment
Question by:tonyhhisc
  • 2
4 Comments
 
LVL 31

Expert Comment

by:Frosty555
ID: 34116455
Your code couldn't possibly work - it doesn't follow the format that jQuery UI expects even in the slightest.....

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).
0
 
LVL 16

Accepted Solution

by:
jmatix earned 500 total points
ID: 34117228
This should work:
<script>
      $(function() {
    $('#dialog').dialog( { width: 200, height: 100}).parent().position({ my: 'right bottom', at: 'right bottom', of: $('#parent') });
      });
</script>

Open in new window

0
 

Author Comment

by:tonyhhisc
ID: 34121336
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!!

0
 

Author Closing Comment

by:tonyhhisc
ID: 34136378
Thank you!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
tutorial for ebay api 3 35
Button to go back 3 25
CSS: Making Pure CSS read more boxes thinner 5 31
VBScript on Html 11 18
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question