search

webismymind / editablegrid

EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running.
http://www.editablegrid.net
Other
795 stars 272 forks source link

Incorrect editor location #24

Closed ekalderon closed 12 years ago

ekalderon commented 12 years ago

When editable grid is inside a div that has a scroll bar, the editor location doesn't account for the scrollbar position. In other words, if the div scroll bar is 100px down, the editor shows 100px below the cell location.

webismymind commented 12 years ago

EditableGrid does account for the vertical and horizontal scrollbar position when positioning the input. We use EditableGrid in such conditions and it works (just tested with the master version). However, I think the limitation is that only one div with scrollbars is supported and it must be the direct parent of the table. Please provide an example of how to reproduce your problem if possible. Thank you.

ekalderon commented 12 years ago

Thank you for the quick reply.

The problem is indeed a div within a div. The reason for the nesting is that when loading from XML, editablegrid needs a div to load into. So the outer div is the one that has the scrollbar, and the inner div is the one editablegrid creates the table from XML inside.

Here's a simple example based on htmlgrid (xml behaves the same). Scroll down and see the location of the editor.

Thank you, Eyal.

My table:

NAME
name1
name2
name3
name4
name5
name6
name7
name8
name9
ekalderon commented 12 years ago

Sorry, the example I pasted got rendered as html instead of code. Here's an escaped version that should be readable in this system.

<html> <script src="/editablegrid/editablegrid-2.0.1.js"></script> <script> window.onload = function() { editableGrid = new EditableGrid("DemoGridAttach"); editableGrid.load({ metadata: [ { name: "name", datatype: "string", editable: true } ]}); editableGrid.attachToHTMLTable('htmlgrid'); editableGrid.renderGrid(); } </script>

<div style="height:200px; width:200px; overflow:scroll;"> <p>My table:</p> <div> <table id="htmlgrid"> <tr id="row0"> <th>NAME</th> </tr> <tr id="row1"> <td>name1</td> </tr> <tr id="row2"> <td>name2</td> </tr> <tr id="row3"> <td>name3</td> </tr> <tr id="row4"> <td>name4</td> </tr> <tr id="row5"> <td>name5</td> </tr> <tr id="row6"> <td>name6</td> </tr> <tr id="row7"> <td>name7</td> </tr> <tr id="row8"> <td>name8</td> </tr> <tr id="row9"> <td>name9</td> </tr> </table> </div> </div>

</html>

webismymind commented 12 years ago

Fixed in fb9baec3401ba6dad5c7b93af8fda67276b156cb