How to position web user control according to client screen

Question

I'm building an multi-column combo-box using asp and Ajax controls. It works perfectly fine. How can i set drop-down size and location according to the client screen and user control position on the page using javascript.

Answer 1

You'll need to use the .style.left, style.top, etc. properties of the element, and the .scrollHeight of the document.body element. For size, you'll use .style.height and .style.width.

The elements must be styled with position:absolute in your CSS. You can make their absolute position relative to a parent by styling the parent as position:relative.

Then, the Javascript may look like:

yourelement.style.top= document.body.scrollHeight + 100 + 'px';

...will put the element's top edge 100px from the scrolled height of the window.

---

Each element's absolute position and location can be controlled using:

yourelement.style.top = ...'px';
yourelement.style.bottom = ...'px';
yourelement.style.left = ...'px';
yourelement.style.right = ...'px';

yourelement.style.width = ...'px';
yourelement.style.height = ...'px';

To get various heights and widths, you can use document.scrollHeight, document.documentElement.scrollHeight or document.body.scrollHeight (depends on browser). These also have .scrollWidth too.