Remove border from List view items

2
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
asked
3 answers
3

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

answered
7

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

See https://atlas.mendix.com/index3.html#/helpers/7881299347899271 for more helper classes

answered
0

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

answered