lusaxweb / vuesax

New Framework Components for Vue.js 2
https://lusaxweb.github.io/vuesax/
MIT License
5.64k stars 741 forks source link

Pagination with tables doesn't work properly (on active) #928

Open czaplinskim opened 4 years ago

czaplinskim commented 4 years ago

On window resize, the div of pagination with active class stay in place.

Zrzut ekranu 2020-10-22 o 10 37 54
czaplinskim commented 4 years ago

I found a solution.

Starting from line 23266 we had:

`if (this.$refs.pagination) { this.activeClassMove = true; this.$nextTick(function () { var offsetLeftPagination = _this3.$refs.pagination.offsetLeft; _this3.leftActive = _this3.$refs["btn" + val].offsetLeft + offsetLeftPagination;

      setTimeout(function () {
         _this3.activeClassMove = false;
      }, 300);
    });
  }`

And you should add a "resize" event listener, so the leftActive variable will get a new value on every change of the width of your browser.

`if (this.$refs.pagination) {
      this.activeClassMove = true;
      this.$nextTick(function () {
        var offsetLeftPagination = _this3.$refs.pagination.offsetLeft;
          _this3.leftActive = _this3.$refs["btn" + val].offsetLeft + offsetLeftPagination;

    window.addEventListener('resize', function() {
        offsetLeftPagination = _this3.$refs.pagination.offsetLeft;
        _this3.leftActive = _this3.$refs["btn" + val].offsetLeft + offsetLeftPagination;
      })

      setTimeout(function () {
         _this3.activeClassMove = false;
      }, 300);
    });
  }`

I am not sure about _this2.leftActive.