b-pagination in Vue in Laravel doesn't look good in whole project

56 Views Asked by At

My b-pagination was working good on all tables, but one day it just started to look wrong on every table in my whole project, I don't know where is root of style of pagination and what could I change. It doesn't show numbers and arrows in same line, something is up and something is down. This is my code in Vue.js, but as I said it was good before, and I also tried to check with b-pagination from vue site https://bootstrap-vue.org/docs/components/pagination, but same, maybe is some problem with npm or style in css.

 <b-pagination
          v-model="currentPage"
          :total-rows="totalRows"
          :per-page="perPage"
          align="right"
          size="sm"
          class="my-0"
          @change="changeCurrentPage"
        >
        </b-pagination>

And I found code in node_modules/bootstrap-vue/src/components/pagination/_pagination.scss

// <pagination> and <pagination-nav> require the helper utility classes
@import "../../utilities";

$bv-pagination-classes-defined: false !default;

// Make sure to include these style definitions only once
@if $bv-pagination-classes-defined == false {
  $bv-pagination-classes-defined: true;

  // Pagination pill style
  .b-pagination-pills {
    .page-item {
      .page-link {
        border-radius: 50rem !important;
        margin-left: 0.25rem;
        line-height: 1;
      }

      &:first-child {
        .page-link {
          margin-left: 0;
        }
      }
    }
  }
}

I am not able to make changes in node modules, so can I make any change in vue files with style

And this is in css

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #009AA7;
  border-color: #009AA7;
}

.page-item.disabled .page-link {
  color: #74788d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #ced4da;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  line-height: 1.5;
}

You can see on the picture enter image description here

1

There are 1 best solutions below

0
milica98 On

Solved by:

.page-item.disabled {
  margin-top: 12px;
}