Solved

jQuery Dialog Positioning inside Parent Element

Posted on 2010-11-11
4
1,418 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

691 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