Listview Styling Help Needed

1
I have a listview that displays contact information for a user (email and phone). The listview is inside of a Layout Grid that has a gray background. I would like the listview objects to have the same gray background, however I've tried putting that color on several different elements on this page with no success - see screenshot below: As you can see, the listview objects have a white background. Any pointers about how to get these ListView rows to have a gray background? Thanks for any help!
asked
3 answers
3

Editing the file in theme/styles/sass/custom/components/_listview.scss is by far the easiest place to modify this.

Add .listview-stylingless in the first place to your list this will make the list completely styleless itself and you have a blank canvas basically. You can then ofcourse add another class 

.my-list-class{
    /*re-add some padding, colours, borders in case you want that etc*/
    // Clear search button (overrides load more button stying)
    .mx-button.mx-listview-clear-button {
        /* Styles here */
    }
    > .mx-button {
        /* Load more button */
    }
    .mx-listview-list {

    }
    .mx-listview-item {
            /*re-add some padding, colours, borders in case you want that etc*/
            /*the lines below should overwrite the form-controls in your listview to have no styling*/
        .form-control, .form-disabled p, .form-control-static{
                background-color: none;
                border: none; 
            }
        &:hover {
            /*Optional styles here */
        }
        &.selected {
            background-color: #ddd !important;  /*<<< this is not very important you can overwrite this */
            &:hover {
                /*Optional styles here */
            }
        }
        &:nth-child(2n+1) {
            /*Optional styles here */
        }
    }
answered
2

It's tough to tell from a picture.
It looks like you're working with either .form-control or .form-control-static. If so, you would just add a background styling to them.

answered
2

Most likely it is the "mx-listview-item" class.
This is not directly accessible via the modeler, you'll need to manipulate it with css. Personally, I always put a custom class on the listview to separate it from other listviews. Then in your css you can do:

.my-transparent-listview .mx-listview-item, .my-transparent-listview .mx-listview-item:hover {
background-color: transparent !important;
/* probably want to change the border too */
border-color: transparent !important;
}

You'll want to use !important to overcome specificity issues with the listview css.

answered