How to get position of elements in Div

[chiewboon]

Hi,

I am tying to do a editable dropdown. Example of the code snippet is as follows:

textbox.style.width = listbox.offsetWidth - downButtonWidth;
listbox.style.position = 'absolute';
listbox.style.clip = 'rect(auto, auto, auto, ' + textbox.style.width + ')';
 
listbox.style.left = textbox.offsetLeft;
listbox.style.top = textbox.offsetTop;    
var obj = textbox;
while ((obj = obj.offsetParent) != null)
{
       listbox.style.left = listbox.style.pixelLeft + obj.offsetLeft;
       listbox.style.top = listbox.style.pixelTop + obj.offsetTop;
}
 

This piece of code works perfectly fine when I place my textbox and list in a div tag without any height specified.

However, when I specify height=60% in my div tag, the whole code fails. I will end up with a floating listbox arrow that does not align with my textbox.

May I know how can I rectified this problem. Thank you very much.

[acoder]

To get the current position, see this link. When setting the position, don't forget the units, e.g. "px". pixelLeft/Top are not supported by all browsers. To align, get the current position of the textbox and set the arrow the same top and left to left+width.