Remove border from List view items

Hi, I have 1 specific list view for which I would like to remove the list view item border (the single line in between all list items). I have managed to remove this via the lib.css file (changed the ".mx-listview .mx-listview-item" class style attribute "border-width" from "1px 0 0 0"  to "0 0 0 0"), but this changes it for the whole site/app and I only want to change 1 specific list view. I tried adding the style attribute in the Style field (so inline style) in the properties of the List view table (and the list view itself), but nothing changes. I tried creating a new class in the Class field in the properties of the List view table (and the list view itself) and adding the new class (incl. style attributes) in the custom.css file, but nothing changes. Hopefully someone can tell me what I'm missing or doing wrong. Thanks in advance George
3 answers

Hello George,

I personally use a generic SASS/CSS snippet in all projects (part of the custom CSS/SASS files - this is what I'd suggest instead of altering your lib files) where I need to remove the border.

The code is:

.no-borders > .mx-list > li{
    border-style: none;

From there on you just need to add the no-borders class to your list.

Hope this helps


You can also use default helper classes from Atlas UI to remove the styling alltogether

See for more helper classes


Hi Dragos, Thanks a lot, that seemed to do the trick.
Apparently I needed to add the "> .mx-list > li" part behind my class name in the custom.css file (the rest I already tried, but without suc6).

I guess I need to do a quick read on css styles and the > mark ! :-)

GRTZ George