Modify text style for MenuTree component

Ignition
1

I am trying to create a marquee-style text display for menu tree items that exceed the designated length. I am able to create the desired effect (or at least close enough for now) on a label component through creating a style class and keyframe animation in the stylesheet that is applied to the textStyle prop of the label. I can then apply other css properties to the label which is effectively the container for the text. I am trying to replicate this behavior in the MenuTree component, but there is no textStyle prop. I tried manually adding this prop to the individual items, under itemStyle, and to the “root” level of the prop tree. When I tried adding the style class to the itemStyle prop of the MenuTree, it applied the effect to the entire item, causing it to shift off screen. I want this effect to apply only to the text. None of these worked. Have I missed something or could there be a different way I should be approaching applying this style?

Here is an example of a label that is (mostly) working (still some kinks to iron out).

2025-11-25_13-47-35

And what happens when I apply the style to the MenuTree itemStyle prop.

2025-11-25_13-51-09

2

You will need to target just the item text itself. Use the dev tools either in your browser or directly in the designer to check what classes are applied to the item text for reference. I’m not at my laptop so I'm a bit hamstrung to help more

1 Like
3

This worked perfect, thank you. Here’s what I put in the stylesheet:

.ia_menuTreeComponent__item__text {
    desiredStylesHere
}

The one improvement I will look for is a way to isolate the changes to only desired menu trees. They don’t seem to have IDs like popup windows do, which seemed to be a viable solution in this thread.

4

You should be able to add to the start of the rule selector a style class (which I'd suggest you also create for the ability to select it)

Eg

.psc-Components\/MenuTree\/MarqueeText .ia_menuTreeComponent__item__text {
    desiredStylesHere
}
2 Likes