Question

I have a div element which I’m using as a pop-over search field which I want to have appear under the element which is being filtered. However, it seems that I cannot use the style.bottom and style.left of the element I want the field to be relative to as this element is static.

Example is here: http://www.is-epic.co.uk/example/example.html

Clicking the Header 2 link will have the input box appear, in the top-left corner of the table. I would like it to appear roughly where Data 1.2 is. How do I achieve this?

(Code in example.html is on one page, in live dev CSS and JS are in separate files)

Answer 1

this works in FF and Google-Chrome

var head = document.getElementById("header_2");
var filter = document.getElementById("search_filter");

filter.style.display = "";
filter.style.left = head.offsetLeft + 'px';
filter.style.top = head.offsetTop + head.offsetHeight + 'px';

it should work with IE as well..

i used variables filter and head to cut down on typing 🙂