Drop down positioned wrong when inside of elements with position: relative

[GoogleCodeExporter]

** What steps will reproduce the problem?
Have a large HTML structure, with several of these having position: relative. 
Place Dropdown-check-list inside of all of these.

** What is the expected output? What do you see instead?
I expected the drop down to be positioned directly under the control widget. 
Instead it's placed way lower.

This is because of the use of .offset() in _toggleDropContainer.show. .Offset() 
returns the offset relative to the window, not the closest ancestor with 
position: relative.
I did a quick-fix by changing to use .position(), but not sure if this is a 
good general fix. Instead it should probably have a loop that runs through the 
parents until either a node with position: relative or the top of the DOM-tree 
is encountered that calculates the offset relative to the nearest element with 
position: relative or the window, whatever is closest..

** What is your environment?
-- DropDownCheckList version: 1.1
-- jQuery version: 1.3.2
-- jQuery UI version: 1.6
-- Browser and version: Safari 5.0.1

** Please provide any additional information below/Please attach sample
html

Original issue reported on code.google.com by morten.f...@gmail.com on 27 Sep 2010 at 11:23

[GoogleCodeExporter]

Attached is html/css that reproduces this problem. It can be opened from the 
same directory in which the test cases for this project reside.

Original comment by b3nm0...@gmail.com on 7 Oct 2010 at 5:53

Attachments:

• break.html

[GoogleCodeExporter]

Sorry for the double post, but I can confirm that morten.fangel's fix works for 
me too.

Original comment by b3nm0...@gmail.com on 7 Oct 2010 at 6:04

[GoogleCodeExporter]

I'm experiencing similar problem. I have an absolutely positioned div, a single 
select directly inside it and a few in a list with display:inline styled 
elements; My check box always appear far away  from the rendered select 
element. Am I doing something wrong? How can I make it work? I include my 
simplified code. Thanks for any help

-- DropDownCheckList version: 1.1
-- jQuery version: 1.4.2
-- jQuery UI version: 1.8
-- Browser and version: firefox 3.6.9 linux

Original comment by frugof...@gmail.com on 14 Oct 2010 at 9:06

Attachments:

• test_box.html

[GoogleCodeExporter]

Just wanted to comment and say that I was having the same problem as well. I 
used the same fix that morten.fangel mentioned. When the drop down is a child 
of an absolutely positioned parent, you'll want to use position() instead of 
offset() to calculate placement. Attached is the fix that worked for me.

Original comment by blairbod...@gmail.com on 10 Nov 2010 at 5:48

Attachments:

• myFix.txt

[GoogleCodeExporter]

Works for me too, thanks!

Original comment by edgar.m...@gmail.com on 19 Nov 2010 at 5:00

[GoogleCodeExporter]

Please download the v1.2 QA version to see if the positioning problem described 
here has been corrected.

Original comment by womohun...@ittrium.com on 7 Jan 2011 at 5:49

• Changed state: MoreInfo

[GoogleCodeExporter]

Fixed in 1.3 (really 1.2qa - I never heard back so I am assuming all is well)

Original comment by womohun...@ittrium.com on 13 Apr 2011 at 5:16

• Changed state: Fixed