How to set a less class in a button list in Java

Question

I wanted to add a less class to a button when it has been selected.

I have a list of track buttons:

    @Inject
    @DataField("trackButtonList")
    @ListContainer("div")
    private ListComponent<Integer, StationTrackButton> trackButtonList;

When I selected one of them I try to set the class active to the corresponding button:

        trackButtonList.setSelector(b -> b.setSelected(true));
        trackButtonList.setDeselector(b -> b.setSelected(false));

        public void setSelected(boolean isSelected) {
           if (isSelected) {
                trackButton.classList.add("active");
           } else {
                trackButton.classList.remove("active");
           }
        }

I cannot set the class "active", when one button is selected. However, if I add the class "active" on google chrome on devTools, button gets the corresponding background color.

I have this code for this part in html:

    <div data-field="trackButtonList" class="nav nav-pills nav-fill">
    <button data-field="trackButton" class="nav-item nav-link"></button>
</div>

And in the less file:

&.nav-item.nav-link {
    &.active {
        background-color: @light-green-color;
    }}

The trackButton is injected in this way:

    @Inject
    @Named("button")
    @DataField("trackButton")
    private HTMLElement trackButton;

score 0 · Answer 1 · answered Jun 04 '19 at 22:59

I think there's a minor mistake in the LESS code, it should be:

.nav-item.nav-link {
    &.active {
        background-color: @light-green-color;
    }
}

Nevertheless I don't think the problem is there. I think it's in the way you mark the component as selected. Sometimes ListComponent.selectComponent() doesn't work as expected if you don't use the correct component instance as parameter.

Try using ListComponent.selectModel() instead.

How to set a less class in a button list in Java

1 Answers1