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
Solved

jQuery Dialog Positioning inside Parent Element

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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

856 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