dhtmlXGrid positioning problems when it's a descendant of a

Jared · October 12, 2007, 2:52am

I am developing a web application that may incorporate the dhtmlXGrid, however I’ve run into a problem. When I have an element (ie. div) with overflowing content and the dhtmlXGrid is part of the content the positioning of the grid is compromised. In IE6, you can see the grid header where it would be if the element was not scrollable, when you try and scroll it does not move. In Firefox 2, you have to specify a height for the containing div and it shows properly, however, when you try to edit the “coro” the drop down menu is not positioned properly, it appears where the grid would be if it were not scrolling. I am unable to test in IE7. I’ve attached a small test case at the end of this question to illustrate the problem.

Note: I had a similar problem with positioning and scrollable elements and it was because I was calculating the offsetTop/Left and not accounting for the scrollTop/Left of the element and it’s parent nodes. I’m not 100% certain that is the case here but might be a place to start.

File structure is as follows:
<br>->index.html
->\javascript
->->\xGrid
->->->\js
->->->->dhtmlXCommon.js
->->->->dhtmlXGrid.js
->->->->dhtmlXGridCell.js
->->->\imgs
->->->->
->->->\css
->->->->dthmlXGrid.css

    Untitled Page

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sapien eu neque tincidunt hendrerit. Vestibulum suscipit iaculis lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sed odio. Mauris sit amet justo eu odio porta semper. In eget risus. Sed lobortis. Phasellus in ante non orci pellentesque imperdiet. Nam quis nisi. Vivamus elementum dui.

        <input id=“txtProductAmount”

Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse cursus. Maecenas nulla pede, ornare ac, scelerisque ut, sodales non, nibh. Praesent at lorem. Curabitur sit amet nisl et erat egestas pellentesque. Suspendisse potenti. Vivamus libero leo, tempus a, mollis vel, ultrices ac, mauris.

Anonymous · October 13, 2007, 1:22am

Problem confirmed, we will look how it can be fully fixed , but as fast solution problem can be resolved by adding position:absolute; as style of scrollable container - please check attached sample.

1192200002.zip (74.8 KB)