search

Chandusangale / dropdown-check-list

Automatically exported from code.google.com/p/dropdown-check-list
1 stars 0 forks source link

Wrong position calculation - its waay out! #142

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 

** What is your environment?
-- DropDownCheckList version:ui.dropdownchecklist-1.1
-- jQuery version:1.4.4
-- jQuery UI version:jquery.ui.1.8.6.ui.core
-- Browser and version:Firefox 3.6.12

I have a div that is hidden, and we this display it. I call the dropdown after 
as before it was calculating a width and height of zero. It now calculates the 
correct width and height but the position is waaay off. See image attached. 
I've attach the 'saved' page.

thanks

Original issue reported on code.google.com by waynep...@gmail.com on 29 Nov 2010 at 10:56

Attachments:

GoogleCodeExporter commented 9 years ago 
The right column layout on that page has:
.rightcolumn {
float:right;
margin-right:30px;
position:relative;
width:250px;
z-index:200;
}

It seems the code the calculates the position is not taking this into account

Original comment by waynep...@gmail.com on 29 Nov 2010 at 11:01

GoogleCodeExporter commented 9 years ago 
I also tried outside the slide down div . ie just on the right column with the 
same result - position is calculated wrong.

Is there any quick fix for this?

Original comment by waynep...@gmail.com on 29 Nov 2010 at 11:05

GoogleCodeExporter commented 9 years ago 
I don't really know javascript too well
but changing the position calculation in the code to:
var config = instance.options;
                    instance.dropWrapper.css({
                        top: instance.controlWrapper.position().top + instance.controlWrapper.outerHeight() + "px",
                        left: instance.controlWrapper.position().left + "px"
                    });

Works for me here. ie using position() rather than offset()

Original comment by waynep...@gmail.com on 29 Nov 2010 at 11:50

GoogleCodeExporter commented 9 years ago 
True, this last change (by waynepope) works for me too.

Original comment by peter.mo...@gmail.com on 2 Dec 2010 at 3:14

GoogleCodeExporter commented 9 years ago 
Bump.  Please commit waynepope's fix to trunk, as it fixed it for me as well.  
Thanks for raising the issue!  I was just about to try it on my own before 
coming across this post and having it confirmed.  Well done.

Seems the common issue to reproduce the issue is a floated div?  Mine is a 
3-column layout.

Original comment by jfore...@gmail.com on 8 Dec 2010 at 1:48

GoogleCodeExporter commented 9 years ago 
The actual issue is that the dropdown containing div has absolute positioning 
which means the left and top offsets will be relative to that of the nearest 
parent element with position: relative. This will work if the only element that 
has position relative is the <body> element but as soon as you set another 
child element to position relative the positioning will be way off. So 
position() calculates the offset based on the nearest parent element with 
position relative and not the global document like offset() does.

Original comment by marcos.j...@gmail.com on 29 Dec 2010 at 10:27

GoogleCodeExporter commented 9 years ago 
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:47

GoogleCodeExporter commented 9 years ago 
1.2QA fixed it for me!

Original comment by jonatkin...@gmail.com on 13 Feb 2011 at 1:28

GoogleCodeExporter commented 9 years ago 
Fixed in 1.3 (1.2qa really)

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