When building a page with Mendix I really love to use list views. They are much more flexible than a data grid. With a list view, one can easily show images, buttons, referenced entities and a lot more. It is also fairly easy to style a list view to look like a table.

With the addition of list view controls last year, Mendix has made it even easier to use list views. Now adding functionality such as sorting, filtering, searching, paging for a list view is trivial.

The problem

However, things are not perfect and I recently ran into an issue. It is a minor issue, but for some reason, I couldn't let go of it. The requirement was to display a list of filters for a list view that allowed the user to filter the rows based on different criteria.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/620a4241-5345-4715-aa83-7b4a93122c0f/Untitled.png

This can be achieved in Mendix with the checkbox filter. This widget has a wealth of options and can apply different filters when checked or unchecked, and can filter both based on attribute or XPath. But for some reason, it does not offer the option to show a label. My initial thought was that this would be easy to work-around by adding some text in Mendix. However, this results in labels which are not clickable. In other words, the user is forced to click the checkbox to toggle the filter. In my opinion, this is not a nice user experience. It should not matter if the user clicks on a label or on the checkbox itself.

The journey

My personal development rule is to avoid javascript hack at all cost. Instead, the solution would have to be based only on HTML and CSS. Luckily, other people had a similar problemand I found some suggestions in a stack overflow thread. The accepted answer offers two options:

  1. Wrap a label tag around the checkbox - this is unfortunately not possible in Mendix. It is only possible to nest things inside a container or a table, but not inside a label element.
  2. Use the for attribute to link the label and the checkbox- this also does not work in Mendix, as the id of the checkbox is dynamically generated.

As I was starting to lose hope I discovered this pen (from the same thread). It uses pseudo-elements to show a clickable label. The only problem was that it does not work in Firefox or IE. That is unfortunate, but it's better to at least offer the feature to some of the users than none of them.

The trick with the pseudo-elements worked and I added a fallback for Firefox and IE which shows a non-clickable label. To make the solution more generic I added the option to specify the label text as a css variable. This makes it possible to set a different label text for each checkbox from Studio without having to go to the theme files every time.

The solution

The final solution consists of this small CSS that I added to my theme.

.labeled-checkbox {
  input[type='checkbox']:after {
	    content: var(--label);
	    margin: -3px 15px;
	    vertical-align: top;
	    white-space:nowrap;
	    display: inline-block;
	}
  .fallback-label {
    display: none;
  }
}
@-moz-document url-prefix() {
  .labeled-checkbox .fallback-label {
    display: inline-block;
  }
}

With the CSS in place adding a label in Mendix is straight-forward

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2338d2bd-6a83-403c-b79d-d0063f3c4e9b/Untitled.png

You can try out the demo here or download the full project from the app store.

I hope you enjoyed reading this blog, and that it helps you build great apps.