CODEWITHSUNDEEP
css
Jeff Davidson
Jeff Davidson

Reputation: 1929

Pagination buttons not showing disabled css

For some reason when it knows the button is supposed to be disabled it shows the css for the .paginate_button and then crosses out the css for the .paginate_button_disabled. Does anyone know why?

.paginate_button_disabled {
    border: 1px solid #F3F3F3;
    color: #CCCCCC;
    margin-right: 2px;
    padding: 2px 5px;
    border: 0;       
}
.paginate_button:hover {
    border:1px solid #52bfea;
    color: #fff;
    background-color: #52bfea;
}
.paginate_active {
    padding: 2px 5px 2px 5px;
    margin-right: 2px;
    border: 1px solid #52bfea;
    font-weight: bold;
    background-color: #52bfea;
    color: #FFF;
}
.paginate_button {
    padding: 2px 5px 2px 5px;
    margin-right: 2px;
    color: #52BFEA;
    border: 1px solid #52BFEA;
}

Upvotes: 0

Views: 1846

Answers (3)

Khaled Elreychico
Khaled Elreychico

Reputation: 1

The best solution is to hide any unnecessary button.

use the following :

.paginate_button_disabled {
    display: none;
}

in this case previous, next, first and last buttons will be shown only when they are needed.

Upvotes: 0

tw16
tw16

Reputation: 29575

Assuming you are adding .paginate_button_disabled to the element without removing .paginate_button, you will need to reorder your css.

The .paginate_button rule should come first:

.paginate_button {
padding: 2px 5px 2px 5px;
margin-right: 2px;
color: #52BFEA;
border: 1px solid #52BFEA;
}
.paginate_button_disabled {
border: 1px solid #F3F3F3;
color: #CCCCCC;
margin-right: 2px;
padding: 2px 5px;
border: 0;       
}
.paginate_button:hover {
border:1px solid #52bfea;
color: #fff;
background-color: #52bfea;
}
.paginate_active {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #52bfea;
font-weight: bold;
background-color: #52bfea;
color: #FFF;
}

The way CSS works, is it cascades down the document. So if they both have the same specificity the CSS rule lower down will win.

Upvotes: 2

dakdad
dakdad

Reputation: 2955

If you are just adding the .paginate_button_disabled class to the element, without removing the .paginate_button class, then the latter would overwrite the disabled rules as it is defined later in the CSS document - they are literally cascading styles.

Upvotes: 1

Related Questions