Skip to main content
S
svisveswaraiya_2859881-Visitor
1-Visitor
December 11, 2018
Solved

CSS FOR MARQUEE TEXT

  • December 11, 2018
  • 1 reply
  • 7049 views

Hi,

I wanted to make a label inside a panel to be marquee and moving to left. I wrote a simple css using keyframe rule but it doesn't work.

 

@keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}

.testLabel .widget-Label {
animation: marquee 5s linear infinite;
}

testLabel is my Label name.

How can I proceed? 

 

Thanks,

Shalini V.

Best answer by mneumann

Hmm...

I just tested this with ThingWorx 8.2 and 8.3 and it's indeed not working.

I was testing my initial solution on ThingWorx 8.4 which will be released ~end of January 2019 - it was working fine there, including the keyframe animations.

 

In ThingWorx 8.4 it's also working e.g. with a Label

The css would be in addition to the keyframes:

 

#root_ptcslabel-13 {
 animation: marquee 5s linear infinite;
 background-color: #eee;
 color: red;
}

Here I'm using the format "#root_<Id>" to apply it to the ID Property of the Widget

 

But it seems like you'd have to wait for the ThingWorx 8.4 release for using this functionality.

~1.5 months to go

 

 

Cheers,

Michael

1 reply

M
mneumann16-Pearl
16-Pearl
December 18, 2018

You were definitely on the right track here! 😉

 

Hmmm... I've played around quite a while to get something going.

Maybe it's too complicated already 🙂

 

I created a new Thing with a property with HTML Base Type.

The Marquee tag is not working there, but bold and italic etc. works nice.

This is probably forbidden due to XSS security reasons - good for the website, but makes it more complex for the designer.

 

In a Mashup I added a ValueDisplay Widget and bound the HTML property to it.

Then set the Renderer & State to "HTML" - "With Formatting"

 

Your .css is working - BUT it's not applied as the Value Display will have several inner containers and divs, so the custom css class will probably not affect anything.

 

In the F12 Tools, I've found I can use the css class from the Value Display.

Set the "Custom Class" to empty (reset if needed) and use the following Custom CSS for your keyframe animation:

 

@keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}

.valuedisplay-container {
 animation: marquee 5s linear infinite;
 background-color: #eee;
 color: red;
}

Sorry for the weird colors, but that was for testing - nice to see this scrolls as well.

 

 

I hope this helps...

 

Cheers,

Michael

M
mneumann16-Pearl
16-Pearl
December 18, 2018

Downside of this: it will affect all the ValueDisplays - so probably it should be used in Contained Mashup where the Custom CSS is not affecting outside containers.

Terms & ConditionsAccessibility statement