Conditional formatting not working ONLY with Chrome browser

[Tirendi]

I apologize in advance that I am not an “super advanced user” and as such, I may not use the proper nomenclature in describing the issue.

In a dynamic table, I conditionally format (with the important tag checked to override the default) the color of the text for each row. This has worked successfully in all browsers when using Wappler 5.x. After upgrading to Wappler 6, the conditional formatting does NOT work in Chrome but DOES work in other browsers. I have cleared the cache in Google Chrome and am using the latest version of Chrome.

Perhaps there is a programming/formatting change that I need to make with Wappler but I don’t believe so… because when I revert the website to the previous (Wappler 5.x) version, the conditional formatting works correctly.

Thank you for any guidance or fixing the issue (despite my explanation).

[brad]

I have also experienced this. The way I got around it was to apply my dynamic formatting to the table cells individually rather than the rows. It’s not ideal but seems to work.

[Tirendi]

Thank you Brad… I never even thought of that approach. I will give that a try and appreciate the insight.

[Teodor]

@Tirendi

In a dynamic table, I conditionally format (with the important tag checked to override the default) the color of the text for each row. This has worked successfully in all browsers when using Wappler 5.x. After upgrading to Wappler 6, the conditional formatting does NOT work in Chrome but DOES work in other browsers. I have cleared the cache in Google Chrome and am using the latest version of Chrome.

Can you please share the code you are using and having problems with?
This sounds like Bootstrap 5 styling change from 5.1 to 5.3.

[Tirendi]

Teodor, Thank you for asking. Here is a screenshot of where I apply a conditional format to the text in the row.

The code for the conditional formatting is:

(cookies1.data.subd==1)?(overallResult == ‘PASS’ ? (cphone == 1 ? ‘rgb(0, 100, 0)’ : ‘black’) : (cphone == 1 ? ‘rgb(0, 0, 200)’ : ‘rgb(200, 0, 0)’)):‘black’

If you would like the code for the entire table, just let me know.

[Teodor]

As i mentioned above, this just seem to be how Bootstrap 5.3 is handling styling. Your inline styles are getting overriden by the Bootstrap styles for the table row children:

You can’t just apply the styling like color to the <tr> like that in Bootstrap 5.3 as it’s controlled by a CSS variable --bs-table-color:.

Create a custom class and set the variable color there:

.my-color {
    --bs-table-color: #006400;
}

Then use the class toggle to add this class when a condition is met:

[Tirendi]

Teodor… thank you so much. I hope this helps others as well.

[brad]

You should be able to add as many Class toggles as you need …

[Tirendi]

You are correct Brad. I failed to complete filling out the condition for the first class prior to trying to add another class toggle. In other words, I was impatient. Thank you so much!