How to apply dynamic class to a list item <li> tag?

0
Is there a way to apply dynamic class to selected list element (li tag)?  When I click on the list item I want to change its style by applying a class to the <li> tag. It works perfectly if I style something inside the list item (inside the <li> tag) but I need to apply the class on <li> tag itself. Example that works with anything inside the list item but not the list item itself (not the <li> tag): if $currentObject/IsSelected = true then 'bubble-selected' else 'not'
asked
3 answers
0

Hi! Maxim,

You can have a look at the Marketplace. this is the link: https://marketplace.mendix.com/link/component/108838

 

Kind regards,

Mehmet

answered
0

You could take a look at the :has() functionality, so I'm assuming it changes the class of ‘something’ inside the li-item, so you could try something like this in your css:

li:has(.bubble-selected) {
        background-color: blue;
}

Depending on how deep the dynamic class is placed you could make a css-selector that gets all the right items.

Regards,
Andrew

answered
0

Dear Maxim,

 

What I would do in this case is to add an attribute to your list Entity: /IsActive (boolean). Add an on-click nanoflow to your listView, that sets /IsActive to true, and deactivates all other /IsActive in the rest of the list. (don't forget to allow access rights to change the boolean).

Now you can apply a dynamic class on the entity from within the listview appearance settings:

I made this example to show what your condition should look like – obviously, in my example, the Entity has no /IsActive attribute, hence the error, but I think this will make it obvious to you what to do. 

In any case, now you have the necessary class to work with ;-).

Hope this helps, if it does, please mark as correct.

Best regards,

Wouter Penris

answered