?
Solved

jQuery Dialog Positioning inside Parent Element

Posted on 2010-11-11
4
Medium Priority
?
1,432 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 2000 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

This article discusses how to implement server side field validation and display customized error messages to the client.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Suggested Courses

752 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