All topics

Adding a class dynamically to an element

MartinF

19 days ago

I'm trying to use the phospher icon library to add icons to nav elements. Its working well until i try to add the class dynamically based on the value in the component attribute. Adding an attribute called class and then adding it with a formula works (correct icon rendered) but stops any of the styling from being applied.

What the best way to handle this?
Filip Dajkovic

19 days ago

Adding classes shouldn't be done as an Attribute, there's dedicated Classes field right below it and you can add multiple classes with dynamic logic
MartinF

19 days ago

You can only add boolean values to toggle classes on and off. There are 1200 possible classes to toggle so not sure how that could work?
MartinF

19 days ago

Need a way to dynamically set a class. Not sure what the Toddle way is on this one
@MartinF
I'm trying to use the phospher icon library to add icons to nav elements. Its working well until i try to add the class dynamically based on the value in the component attribute. Adding an attribute called class and then adding it with a formula works (correct icon rendered) but stops any of the styling from being applied.

What the best way to handle this?
Lucas G

19 days ago

What styles are you referring to here
Ones you applied or ones from the library?
MartinF

19 days ago

Just the color: and font-size: added in the styles tab.
they get ignored and library defaults are rendererd
Lucas G

19 days ago

Sounds like normal behavior if the class is applying its own styles
MartinF

19 days ago

this only happens when adding the class as an attribute. the styles work fine if i add the class by giving class values (not dynamically as an attribute)
MartinF

19 days ago

works fine this way
MartinF

19 days ago

Might need a bit of custom code? Want to do things 'the Toodle way' before i start hacking about
Tod

19 days ago

Great energy @MartinF! Your continuous contribution to the toddle Community just made you advance to Community Level 6!
Hanif

8 days ago

Hey @MartinF, mind sharing how you achieved this? I've managed to set up the header and added the appropriate classes to an <i> tag, but it doesn't seem to be rendering in my case.

Adding a class dynamically to an element

MartinF

Filip Dajkovic

MartinF

MartinF

Lucas G

MartinF

Lucas G

MartinF

MartinF

MartinF

Tod

Hanif

Stop scrolling. Start building.

Chat with @team-toddle

Video call our CEO

Get in touch!

Product

Company

Resources

Community