DHTMLX
Start Building Professional
Start Building Professional
Web Apps Today
| Categories | Question details Back To List | ||||||||
dhtmlXGrid positioning problems when it's a descendant of a scrollable element (IE6, Fx 2+) 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: \ ->index.html ->\javascript ->->\xGrid ->->->\js ->->->->dhtmlXCommon.js ->->->->dhtmlXGrid.js ->->->->dhtmlXGridCell.js ->->->\imgs ->->->-><image files> ->->->\css ->->->->dthmlXGrid.css <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head runat="server"> <title>Untitled Page</title> <script language="javascript" type="text/javascript" src="javascript/xGrid/js/dhtmlXCommon.js"></script> <script language="javascript" type="text/javascript" src="javascript/xGrid/js/dhtmlXGrid.js"></script> <script language="javascript" type="text/javascript" src="javascript/xGrid/js/dhtmlXGridCell.js"></script> <link rel="stylesheet" type="text/css" href="javascript/xGrid/css/dhtmlXGrid.css"> </head> <body onload="initializeMudGrid()" > <div style="width:500px;height:500px;overflow:auto "> <p>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.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>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.</p> <div id="gridbox" style="width:400px; height:500px; border:solid 1px red"></div> <input id="txtProductToAdd" /> <input id="txtProductAmount" <p>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.</p> <p>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.</p> </div> <script language="javascript" type="text/javascript"> function initializeMudGrid(){ mudGrid = new dhtmlXGridObject('gridbox'); mudGrid.setHeader("Product,Amount,Conc.,Unit,Require Test?"); mudGrid.attachHeader("<div id='productAdd'></div>,<div id='productAmount'></div>,<input type='button' value='Add Product' id='btnAddSuggest' onclick='(arguments[0]||window.event).cancelBubble=true;'>,#cspan,#cspan"); mudGrid.setInitWidths("100,60,70,70,100"); mudGrid.setColAlign("left,center,center,center,center"); mudGrid.setColTypes("ro,ed,ro,ro,coro"); mudGrid.getCombo(4).put("0","No"); mudGrid.getCombo(4).put("1","Yes"); mudGrid.getCombo(4).put("2","Check"); mudGrid.setColSorting("str,int,int,str,str"); mudGrid.setColumnColor("white,#d5f1ff,white,white,#d5f1ff"); mudGrid.setColumnMinWidth("100,60,60,60,60"); //set minimum column widths mudGrid.setImagePath("javascript/xGrid/imgs/"); //override default img path mudGrid.enableCellIds(true); //add ids to individual cells mudGrid.enableMultiselect(true); //enable multi-select to delete rows mudGrid.init(); //Initialize the grid mudGrid.setSizes(); var text,toxic,newRow; mudGrid.clearAll(false); for(var i = 0; i <10; i++){ text = "Product #"+i+",10,2.5 kg/m3,10 kg,No" newRow = mudGrid.addRow(i,text); } document.getElementById("productAdd").appendChild(document.getElementById("txtProductToAdd")); document.getElementById("productAmount").appendChild(document.getElementById("txtProductAmount")); mudGrid.setSizes(); } </script> </body> </html> Answer posted on Oct 12, 2007 18:22 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. Attachments (1)
|
