CSS Pagination Style (Bootstrap)
I am using the botstrap pagination style, but I don't know why it doesn't work as it should (it sticks to the left and some parts below others). Here is my code:
<section class="admin" id="admin-products">
<div>
<ul ng-if="orders.pager.pages.length" class="pagination">
<li ng-class="{disabled:orders.pager.currentPage === 1}">
<a ng-click="orders.setPage(1)">First</a>
</li>
<li ng-class="{disabled:orders.pager.currentPage === 1}">
<a ng-click="orders.setPage(orders.pager.currentPage - 1)">Previous</a>
</li>
<li ng-repeat="page in orders.pager.pages" ng-class="{active:orders.pager.currentPage === page}">
<a ng-click="orders.setPage(page)">{{page}}</a>
</li>
<li ng-class="{disabled:orders.pager.currentPage === orders.pager.totalPages}">
<a ng-click="orders.setPage(orders.pager.currentPage + 1)">Next</a>
</li>
<li ng-class="{disabled:orders.pager.currentPage === orders.pager.totalPages}">
<a ng-click="orders.setPage(orders.pager.totalPages)">Last</a>
</li>
</ul>
</div>
</section>
There are other CSS files in my project that I don't know who might be responsible for this issue. The page display looks like this:
I think there is something wrong with the li tag. For example, when I put a green background color for the first li, it looks like this (the background appears on the right side.):
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<style>
.admin {
width: 100%;
max-width: 1060px;
margin: auto;
padding-top: 150px;
padding-bottom: 500px;
direction: rtl;
text-align: right;
}
.admin .navigation {
text-align: center;
margin: auto;
display: inline-block;
padding: 15px;
border-bottom: 1px solid #c1c1c1;
margin-bottom: 40px; }
.admin .navigation a {
text-decoration: none;
color: #8e8e8e;
cursor: pointer;
font-weight: 300;
font-size: 12px; }
.admin .navigation a.active {
color: #5C5C5C;
font-weight: 700; }
.admin .navigation span {
color: #9B9B9B;
padding: 10px; }
.admin table {
width: 100%;
direction: rtl;
border: 1px solid #ebecf0;
text-align: center; }
.admin table thead {
background: #f8fafc;
color: #8291a6;
border-bottom: 1px solid #ebecf0;
font-size: 10px; }
.admin table thead th {
padding: 7px 0; }
.admin table tbody {
font-size: 12px;
color: #616161; }
.admin table tbody tr {
background: white;
border-bottom: 1px solid #ebecf0; }
.admin table tbody tr td {
font-size: 11px;
font-weight: 300;
vertical-align: middle;
padding: 5px; }
.admin table tbody tr td .name {
display: inline-block;
padding-right: 10px; }
.admin table tbody tr td .photo {
width: 50px;
vertical-align: middle; }
.admin h1 {
font-size: 30px;
line-height: 1.5; }
.admin h3 {
font-size: 18px;
line-height: 1.5;
display: inline-block;
margin-right: 10px; }
.admin select {
font-size: 15px;
height: 38px; }
.admin label {
display: block;
margin: 10px; }
.admin input[type=text] {
display: inline-block;
border: 0px;
line-height: 20px;
margin: 10px 0px;
font-size: 15px;
padding: 7px 5px;
width: 400px;
font-family: IRANSans ,'PT Sans', sans-serif !important; }
.admin button {
border: 0;
margin: 10px 0;
border-radius: 5px;
color: #fff;
font-size: 15px;
padding: 5px 10px;
font-weight: 300; }
.admin button.green {
background: #8BC34A; }
.admin button.red {
background: #F44336;
font-size: 13px; }
.admin .submission {
direction: ltr;
text-align: left;
line-height: 2;
background: #fff;
padding: 10px; }
.admin .submission ul {
margin-bottom: 100px; }
.admin .submission ul li {
font-size: 13px; }
.admin .submission ul li span {
background: #282828;
color: #fff;
padding: 0px 11px;
margin-right: 10px; }
</style>
<section class="admin persion" id="admin-products">
<div>
<ul ng-if="orders.pager.pages.length" class="pagination">
<li ng-class="{disabled:orders.pager.currentPage === 1}">
<a ng-click="orders.setPage(1)">First</a>
</li>
<li ng-class="{disabled:orders.pager.currentPage === 1}">
<a ng-click="orders.setPage(orders.pager.currentPage - 1)">Previous</a>
</li>
<li ng-repeat="page in orders.pager.pages" ng-class="{active:orders.pager.currentPage === page}">
<a ng-click="orders.setPage(page)">{{page}}</a>
</li>
<li ng-class="{disabled:orders.pager.currentPage === orders.pager.totalPages}">
<a ng-click="orders.setPage(orders.pager.currentPage + 1)">Next</a>
</li>
<li ng-class="{disabled:orders.pager.currentPage === orders.pager.totalPages}">
<a ng-click="orders.setPage(orders.pager.totalPages)">Last</a>
</li>
</ul>
</div>
</section>
</body>
</html>
<script>
$scope.orders = {
pager: {
currentPage:1,
endIndex:29,
endPage:4,
pageSize:30,
pages: [1,2,3,4],
length:4,
startIndex:0,
startPage:1,
totalItems:100,
totalPages:4
}
}
</script>
+3
source to share
