CODEWITHSUNDEEP
htmlcsspagination
Olga B
Olga B

Reputation: 513

Make pagination stay on the center of the page

Currently my pagination changes its alignment slightly if you are on the first page or on the last page. When you go to the rest pages, the pagination stays in the center between the buttons "Next" and "Back" which appears only in this case. If you are on the first page, there is only "Next" button; when you're on the last page, there is only "Back" button. In both cases my pagination kind of sticks to these buttons leaving the center position.

Here is my HTML:

<template>
 <nav v-if="pagination.total_pages > 1" class="text-center g-mt-5">
  <ul class="list-inline">
   <li v-if="!pagination.first_page" class="list-inline-item float-sm-left">
    <router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-16"
                 :to="getLinkToPreviousPage()">
      <i class="fa fa-angle-left g-mr-5"></i>
      Back
    </router-link>
  </li>

  <li class="list-inline-item g-hidden-sm-down"
      v-if="pagination.current_page > (2)">
    <router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-14"
                 :to="getLinkToPage(1)">1</router-link>
  </li>

  <li class="list-inline-item g-hidden-sm-down"
      v-if="pagination.total_pages > 3 && pagination.current_page > 3">
    <span class="g-pa-7-14">...</span>
  </li>

  <li class="list-inline-item g-hidden-sm-down"
      v-if="!!pagination.prev_page">
    <router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-14"
                 :to="getLinkToPage(pagination.prev_page)">
      {{ pagination.prev_page }}
    </router-link>
  </li>

  <li class="list-inline-item g-hidden-sm-down">
    <a class="u-pagination-v1__item u-pagination-v1-4 u-pagination-v1-4--active g-rounded-50 g-pa-7-14"
       href="javascript: void(0);">
      {{ pagination.current_page }}
    </a>
  </li>

  <li class="list-inline-item g-hidden-sm-down"
      v-if="!!pagination.next_page">
    <router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-14"
                 :to="getLinkToPage(pagination.next_page)">
      {{ pagination.next_page }}
    </router-link>
  </li>

  <li class="list-inline-item g-hidden-sm-down"
      v-if="pagination.current_page < (pagination.total_pages - 2)">
    <span class="g-pa-7-14">...</span>
  </li>

  <li class="list-inline-item g-hidden-sm-down"
      v-if="pagination.current_page < (pagination.total_pages - 1)">
    <router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-14"
                 :to="getLinkToPage(pagination.total_pages)">
      {{ pagination.total_pages  }}
    </router-link>
  </li>

  <li v-if="!pagination.last_page"
      class="list-inline-item float-sm-right">
    <router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-16"
                 :to="getLinkToNextPage()">
      Next
      <i class="fa fa-angle-right g-ml-5"></i>
    </router-link>
  </li>
</ul>
</nav>
</template>

Here is CSS:

/*------------------------------------
Paginations
------------------------------------*/
/* Pagination v1 */
.u-pagination-v1__item {
display: inline-block;
text-align: center;
text-decoration: none;
border: solid 1px transparent;
transition: all .3s ease;
}

.u-pagination-v1__item--active, .u-pagination-v1__item:hover, .u-pagination-v1__item:focus {
text-decoration: none;
cursor: pointer;
}

.u-pagination-v1__item-info {
display: inline-block;
text-align: center;
text-decoration: none;
}

.u-pagination-v1__item--disabled {
opacity: .5;
pointer-events: none;
}

/* Pagination Style v1 */
.u-pagination-v1-1 {
color: #999;
border-color: #999;
}

.u-pagination-v1-1--active, .u-pagination-v1-1:hover, .u-pagination-v1-1:focus {
background-color: #0cbb67;
color: #fff;
border-color: #0cbb67;
}

/* Pagination Style v2 */
.u-pagination-v1-2 {
color: #555;
border-color: #555;
}

.u-pagination-v1-2:hover, .u-pagination-v1-2:focus {
color: #0cbb67;
border-color: #0cbb67;
}

.u-pagination-v1-2--active, .u-pagination-v1-2--nav {
background-color: #0cbb67;
color: #fff;
border-color: #0cbb67;
}

.u-pagination-v1-2--active:hover, .u-pagination-v1-2--active:focus, .u-pagination-v1-2--nav:hover, .u-pagination-v1-2--nav:focus {
color: #fff;
}

.u-pagination-v1-2--nav:hover {
background-color: rgba(114, 192, 44, 0.8);
}

/* Pagination Style v3 */
.u-pagination-v1-3 {
color: #333;
border-color: #333;
}

.u-pagination-v1-3--active, .u-pagination-v1-3:hover, .u-pagination-v1-3:focus {
background-color: #333;
color: #fff;
border-color: #333;
}

/* Pagination Style v4 */
.u-pagination-v1-4 {
color: #333;
border-color: transparent;
}

.u-pagination-v1-4:hover, .u-pagination-v1-4:focus {
color: #0cbb67;
border-color: #0cbb67;
}

.u-pagination-v1-4--active {
color: #fff;
background-color: #0cbb67;
border-color: #0cbb67;
}

.u-pagination-v1-4--active:hover, .u-pagination-v1-4--active:focus {
color: #fff;
}

/* Pagination Style v5 */
.u-pagination-v1-5 {
color: #999;
border-color: #ccc;
}

.u-pagination-v1-5--active, .u-pagination-v1-5:hover, .u-pagination-v1-5:focus {
background-color: #0cbb67;
color: #fff;
border-color: #0cbb67;
}

Is there any CSS trick to make my pagination stay on the center independently from the navigating buttons?

Screenshots: enter image description here enter image description here

Upvotes: 0

Views: 1309

Answers (1)

Chintan Amrutia
Chintan Amrutia

Reputation: 311

* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
body, html { margin:0; padding:0;}
.boxmain { width:100%; padding:0 20px; overflow:hidden;}
.box { display:inline-block; vertical-align:top; width:31.1%; margin:0 1%; height:100px; background:#f1f1f1;}

.pagination { overflow:hidden; text-align:center; padding:0; position:relative; margin:20px 40px;}
.pagination .navlink  { position:absolute; top:0;}
.pagination .nextlink { right:0;}
.pagination .prevlink { left:0;}
.midbox { display:inline-block; vertical-align:top;}
.midbox a { display:block; width:30px; height:30px; color:#000; text-align:center; border-radius:100%; float:left; text-decoration:none;}
<div class="boxmain">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

<div class="pagination">
    <div class="navlink prevlink">Prev</div>
    <div class="midbox">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
    <div class="navlink nextlink">Next</div>
</div>

<div class="pagination">
    <div class="navlink prevlink" style="display:none;">Prev</div>
    <div class="midbox">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
    <div class="navlink nextlink">Next</div>
</div>

<div class="pagination">
    <div class="navlink prevlink">Prev</div>
    <div class="midbox">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
    <div class="navlink nextlink" style="display:none;">Next</div>
</div>

Upvotes: 3

Related Questions