Class Toggle issue when clicking in white/dead space

Wappler General How To
#1

Hi, I have buttons on my page with the following. ‘btn-outline-primary’

image

I am using the class toggle to update the button class to ‘btn-primary’ when the condition is true.
This condition is set using the dynamic event ‘Click’

image

However, my issue is that when I click anywhere in the white/dead space, the button text disappears I don’t know what could be causing it. See below.

Untitled video

Here is the button.
<button id="btnquote1val1" class="btn text-nowrap btn-outline-primary" dmx-on:click="session1.set('quotestep1_annualvalue','Under €100k')" dmx-class:btn-primary="(session1.data.quotestep1_annualvalue == 'Under €100k')">Under €100k</button>

Would anyone know why this is happening and how to resolve it?
Any help will be great, thanks.

#2

Looks like some style is affecting the active class of the button but not the focus state. Please inspect your button with the dev tools and see what styles are applied to the active class for the button (when not focused).

#3

Hi Teodor,

I have inspected the button and taken the following screenshot.

image
image1641×397 56.4 KB

So, it looks like the class ‘btn-outline-primary’ shows higher specificity, therefore, the color for ‘btn-primary’ has been overridden.

Not sure how I fix this.

#4

Why not just use a class of .active and not .btn-primary?
Button classes are not supposed to be stacked like that. You either use btn-primary or btn-outline-primary not both at the same time.

1 Like
#5

Thanks Teodor.

It was my lack of understanding of the class toggle. I changed it to ‘active’ and now it’s working as expected.

1 Like