Solved

jQuery Dialog Positioning inside Parent Element

Posted on 2010-11-11
4
1,409 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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Anyone familiar with PhotoSwipe? 3 15
Triple line in an alert message 4 22
Customising IE behaviour on certain pages 2 61
.CSS HTML Help 3 23
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
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.
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…
This video teaches users how to migrate an existing Wordpress website to a new domain.

756 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