Skip to Main Content

User Interfaces Standing Committee

Working site for the UISC

Adjust Results Numbering Display

Adjust Results Numbering Display

Objective: By default, the numbers in the results list are within the checkbox. This solution takes the numbers outside of the checkbox.

Before:

After:

How to accomplish this: This solution requires the following custom CSS code be added to the /VIEW_CODE/css/custom1.css file:



/*adjust results numbering display */
prm-search-result-thumbnail-container img { 
     margin-left: 14px;
}
.list-item-count { 
     font-size: 1em;
}
.list-item-count::after, prm-requests md-list-item .md-list-item-with-checkbox .item-index::after, prm-loans md-list-item .md-list-item-with-checkbox .item-index::after { 
     content: ".";
}
.has-checkbox .list-item-count {
	top: 1em;
	left: 34px; 
	opacity: 1;
	font-weight: bold;
}
prm-requests md-list-item .md-list-item-with-checkbox .item-index, prm-loans md-list-item .md-list-item-with-checkbox .item-index { 
	left: 30px; 
	font-weight: bold; 
	color: #000000;
	top: 0.75em;
	opacity: 1;
	font-size: 1em;
}
prm-requests .md-list-item-text h3 a, prm-loans .md-list-item-text h3 a { 
     margin-left: 25px;
}
prm-brief-result-container .result-item-text { 
     padding-left: 2em;
}
md-checkbox.md-checked .md-icon { 
     background-color: #1268A5; 
}
@media (max-width: 599px) {
	div.result-item-text.layout-fill.layout-column.flex div.media-content-type.align-self-start { margin-left: 10px;
	}
}



Code credit: Santa Fe College