Anu Rajan Anu Rajan - 1 year ago 75
AngularJS Question

Angular Material Pagination select color change to none?

so i have md-table-pagination setup (angular material. But every time i click the desired row per page ,the color of the selected page goes from white to black. how do i make it so that the label stay white even after i click ? i tried messing with label, but its only changing the color of the label not the one after clicking .
enter image description here



</md-table-container>
<md-table-pagination md-limit="$ctrl.query.limit" md-limit-options="$ctrl.query.limitOptions" md-page="$ctrl.query.page" md-total="{{$ctrl.fullDataList.length}}" md-on-paginate="$ctrl.onPaginate" md-page-select></md-table-pagination>
</md-table-container>

.md-table-pagination {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
box-sizing: border-box;
padding: 0 24px;
font-size: 12px;
color: $font-color;
border-top: 1px rgba(0, 0, 0, 0.12) solid;
}
.md-table-pagination md-select {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
min-width: 64px;
}
.md-table-pagination md-select:not([disabled]):focus .md-select-value {
color: rgba(0, 0, 0, 0.54);
}
.md-table-pagination md-select .md-select-value {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.md-table-pagination md-select .md-select-value span.md-select-icon {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
margin-right: -6px !important;
}
.md-table-pagination md-select .md-select-value span.md-select-icon:after {
top: initial;
-webkit-transform: scaleY(0.5) scaleX(1);
transform: scaleY(0.5) scaleX(1);
}
.md-table-pagination > * {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 56px;
}
.md-table-pagination > .buttons:not(:first-child),
.md-table-pagination > .limit-select:not(:first-child) {
margin-left: 32px;
}
.md-table-pagination > .buttons {
margin-right: -16px;
}
.md-table-pagination > .buttons > .md-button.md-icon-button {
margin: 0;
}
.md-table-pagination > .buttons > .label + .md-button.md-icon-button {
margin-left: 20px;
}




Answer Source
.md-table-pagination md-select:not([disabled]):focus .md-select-value {
 color:white;
}

basically md-select we can change into any color. In my situation the color was default to black on select, simply changed to white

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download