We have a Dart interface to the Polymer version of vaadin-grid. We have been using v1.1 successfully and wanted to migrate to v1.2.0 to take advantage of the column resizing and reordering features. Column resizing works great. But, column reordering has an issue:
When we drag a column header, we do not see the “dragging column” popup or the blue “drop” marker, but the reordering does still work.
When we run v1.2.0 in a pure Polymer JavaScript environment, we do see the “dragging column” popup and the blue “drop” marker, as expected.
If you have any ideas as to what might be causing this issue, or where we might begin to look, we will greatly appreciate it. Using the browser developer tools has been very difficult since the “dragging column” popup only appears while dragging.
I have made some progress on this. I found that when dragging starts a new
gets inserted into the DOM that has a class="
header-drag-table ". If I give this class a fixed height (for example, 100px), then I see the “dragging column” popup and the blue “drop” markers. I’m not sure why I need the fixed height instead of the originally specified height of 100%, but it does seem to work for me.
I’ve still got more work to do because I override the
vaadin-grid-header class and the
underneath the
also uses this class, but in this case, I don’t want the overridden styles.
For the
header-drag-table table, I also found that if I use
position: absolute instead of
relative , then it works as expected. I don’t know if this affects the pure JavaScript environment or not, but I’m happy now .
.