How to add a dynamic style to a table cel

Wappler General Need Help
1

I added a dynamic attribute:
image

That created this code:
image

But it does not work. This is what is rendered at the front end:
image

It should be something like
<td class="warning" dmx-text="urgency_level">Warning</td>

What did I do wrong?

2

You should apply a class toggle, not style in case you want a dynamic class to be applied. The style attribute expects a valid CSS rule (inline styles), and urlg is not.
The other option is to use dmx-bind:class="urgency_level" if the expression returns the class name.

3

Hi Teodor
the class toggle does not make sence to me; it needs a condition and the value cannot be set dynamically right?

The other option works! I pasted it in but I cannot find it in the visual editor. So I can only add this by manually adding such code?

Is this the best way to applay a class to an element from a dynamic source?

4

It works like that:

dmx-class:class_name="dynamic_expression"

for example

dmx-class:warning="urgency_level == 'warning'"

I see what you mean, yes it seems the dynamic class attribute is not in the UI. But you can make any static attribute dynamic, by adding dmx-bind: in front of it:

dmx-bind:name
dmx-bind:class
dmx-bind:id
dmx-bind:alt

etc.

I will check this with the team and add the class attribute also in the UI.

5

Thnx Teodor,
I understand the use of the toggle function. But it made no sence to my specific use case. I want to apply a class with whatever the database field value is.

Would be helpful to have the dynamic class added to the dynamic attribute section.

Thanks

6

New challenge: add a second class

I would like to center the text of this td.
Normally you would simply add class="text-center", but that does not work in my case.

I tried:

<td dmx-text="urgency_level" dmx-bind:class="urgency_level" class="text-center"></td>

And

<td dmx-bind:class="urgency_level" class="text-center">{{urgency_level}}</td>

And

<td dmx-bind:class="urgency_level text-center">{{urgency_level}}</td>

But none works.
Any idea?

7

the correct code is:

<td dmx-bind:class="'text-center ' + urgency_level">{{urgency_level}}</td>

you always wrap the static values in single quotes.

1 Like
8

Brilliant @Teodor