Is it possible to make a label scrolling when the text is too long to fit?
It is possible to add css to the label that makes it crawl. The problem is that extra javascript is required to make it text aware (i.e., actual length of the text) so that there’s not lots of dead space in front/behind the text.
Something like this gets you the basics:
component: f7-card
config:
title: Scrolling Text With CSS
style:
justify-content: center
stylesheet: >
.scrolling-button span {
position: absolute;
transform: translateX(100%);
animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
slots:
default:
- component: oh-button
config:
text: Here is some text that is really just too long to fit inside this very small button
class:
- scrolling-button
3 Likes
is there a reason why you use oh-button instead of label?
Nope, that was just what I quickly typed up as the example. You can use whatever you like as long as you can figure out the css selector for it. In the case of the button, the button itself is a link element that gets the class you set in the widget, but the button label is then inside a span that is a child of that link. Hence the selector .scrolling-button span.
An oh label gets the class applied to it directly so you wouldn’t need the extra span. The css selector would just have to be whatever you set as the class for the label.