Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Stefan Straka
30
igGrid - Delete Row - button changes position after scrolling
posted

Hey!

I have several grids on a page that implement the "Delete Row" - feature. It works fine until I scroll in the table, then the button moves a bit down. The further I scroll the further the button moves, until can't see it anymore (see attached images).

I assume that's because the button has absolute positioning, and the position is calculated (in part) by how far the user scrolled down.

That would be correct behavior if I would be scrolling on the page, but in this case the user scrolls inside the container.

With every step I scroll, the button moves about 100px further down.

Did I do something wrong, or can this be fixed somehow?

We're using Ignite UI 17.2.

Thanks

Parents
No Data
Reply
  • 30
    Verified Answer
    Offline posted

    Quick update for future reference:

    We couldn't downgrade jQuery (too many side effects), but I found a workaround for our use case:

        var fixDeleteButton = function (gridId) {
        var ubodySelector = "#" + gridId + ">tbody";
        var fbodySelector = "#" + gridId + "_fixed>tbody";
        $("#" + gridId + "_container").on({
            "mouseenter.deletebutton": function (evt) {
                var row = $(evt.target).parent();
                var rowGrp = row.siblings().add(row);
                var db = $("#" + gridId + "_updating_deletehover");
                if (db.length) {
                    var top = row.offset().top - rowGrp.first().offset().top + (row.outerHeight() - db.outerHeight()) / 2;
                    db.css({ top: top });
                }
            }
        }, ubodySelector + ">tr," + fbodySelector + ">tr");

    };

    This may not be a perfect solution, but we couldn't find any bugs thus far.

Children
No Data