0

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;
        }
      }
    }
  }
}

You can see on the picture enter image description here

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.