Hi Matthew,
The way I tried this before
Can be done by setting {display:none} for all and using CSS and <class>:first-child {display: block (or inline or...) } which is probably best since you are already fiddling in CSS, but the most common solution is like Nirmalkumar describes.
These are the snippets that most of the community uses to put the heading of a template grid or list view below the control bar without repeating. (I’ve seen this css in several posts over the years). Allows for easier styling / responsiveness of a listview with header.
Put heading of a template grid or list view below the control bar without repeating
“.grid-inlineheader” class added to listview.
“grid-inlineheader-header” class added to heading inside listview
/// List view or template grid inlineheader
.grid-inlineheader.mx-listview {
.mx-listview-item {
.grid-inlineheader-header {
display: none;
}
}
.mx-listview-item:first-child {
.grid-inlineheader-header {
display: inherit;
}
}
}
/// New React based listview (Only when not containing dojo based widgets)
.grid-inlineheader.mx-listview {
li {
.grid-inlineheader-header {
display: none;
}
}
li:first-child {
.grid-inlineheader-header {
display: inherit;
}
}
}