Hi, I am trying to get a marquee effect using only CSS (as html marquee is deprecated) in a single cell in a grid. The problem is that the string in a column overflows into the next column (with or without animation). I have tried various things, including setting definite widths for the columns and the items (there are quite a few CSS articles on the web about this) with no luck. What I want to achieve is that the string remains inside it’s grid cell and scrolls, whatever it’s length. I am NOT a CSS expert but am hoping someone on here will know if this is possible in CSS (I can easily make it work with HTML marquee) or maybe this is a limitation of the cusom button card, which I love. I have made a very simple example.
type: custom:button-card
extra_styles: |
@keyframes marquee {
100% {
translate: -100%;
}
0% {
translate: 100%;
}
}
styles:
card:
- width: 500px
- height: 90px
- outline: solid 1px red
custom_fields:
my_name:
- min-width: 0px
- overflow: visible
# have also tried hidden and auto for overflow
- animation: marquee 5s infinite linear
my_label:
- min-width: 0px
grid:
- grid-template-columns: 1fr 1fr
- grid-template-areas: |
"my_name my_label"
custom_fields:
my_name: some text which overflows into the next grid cell
my_label: some more text