How to configure CSS for list view

0
I have to change the css for the list view. The list view background color is white. I don't want white color and i want list to view side by side not as each rows for better ui
asked
2 answers
1

To change the List View background color and display items side by side, you need to use custom CSS. First, assign a custom class to your List View. Select the List View and add something like custom-listview in the Class property. This lets you target only that specific list.


To modify the background color, add styles in your theme CSS file (for example main.scss or custom.scss). If the white background is applied to both the list and its items, you should override both:


.custom-listview {
  background-color: transparent; /* or any color you prefer */
}

.custom-listview .mx-listview-item {
  background-color: transparent;
}


To show the items side by side instead of stacked in rows, you can use a flex layout. This creates a card-style grid and improves the UI:


.custom-listview .mx-listview-content {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.custom-listview .mx-listview-item {
  width: calc(50% - 12px); /* 2 columns */
}


The important part is that you can control the number of columns by adjusting the width value. For example, using 33.33% will create 3 columns. This approach lets you customize both the appearance and layout of the List View.

answered
0

Change List View Background Color (Correct Way)

Do NOT edit Atlas UI CSS directly.

Steps:

  1. Select the List View
  2. Add a class in the Appearance → Class property
  3. Example:
  4. lv-custom
  5. Go to:

theme/web/main.scss

Add:


.lv-custom {
  background-color: #f5f7fa !important; 
}

.lv-custom .mx-listview-item {
  background-color: #f5f7fa !important;
}

Then:

  • Save
  • Run locally
  • Clear browser cache if needed

This is the supported way to override styling in Mendix (as per Atlas UI customization guidelines).

2.Show List View Items Side-by-Side (Grid Layout)

By default List View renders items vertically.

To display side-by-side, use Flexbox:

Add this CSS:


.lv-custom .mx-listview {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.lv-custom .mx-listview-item {
  width: 300px;   // adjust as needed
}

Now items render in multiple columns instead of rows.

Alternative (Better UI Approach)

If you're on Mendix 9+:

Instead of forcing List View layout via CSS, you can:

  • Wrap content inside a Layout Grid
  • Or use Gallery widget (Data Widgets module)
  • It is designed for side-by-side card layout
  • Cleaner and more stable than CSS override

This is the recommended best practice in recent Mendix versions.

answered