How To Keep Card Full Of Text - But Scroll When Text Doesn't Fit - Keeping Card 100% Full Of Text

[flat blade]

Hi!

As the title says, I am looking to have scrolling text (name of the current playing song) scroll if it doesn't fit in the text space (card), keeping the space 100% full at all times. In other words, when it scrolls, it only scrolls until the last character is visible. Then it stops scrolling for a brief pause, then scrolls the opposite way until the first character can be seen in the card. Then pause, and repeat.. I can't figure it out. But attached is the code I have so far that is close but not quite there yet. Also, one more note, I do not want it to scroll if the text fits the space.

Can anyone help me with this?

[flat blade]

** Update: I was able to get it to scroll to the end and to the beginning like I wanted, but now my problem is, it scrolls even the short text also, which I don't want. In other words, if the text fits the container, no scrolling, if there is overflow; scrolling back and forth.

[leaden pike]

I think I may have a simpler method of creating the scrolling marquee. I'll have to check through some of my experiments.
I think the fix you would need would be to figure up the length of the string. Under a certain number, no scroll; over scrolls. But, this may cause problems if the card is viewed at different resolutions. Not sure how to go about implementing something like that with what you currently have.

[flat blade]

Hey, thanks for replying! The thing is, it automatically calculates the the string and scrolls correctly. The problem lies when the string is less than the container, it scrolls anyway. I know it's possible because many media players scroll this way. Like for example, in my vehicle, the radio scrolls the title of the song like this. The string scrolls left and right always filling the container.

I was able to accomplish this type of scrolling using HTML. I have attached the files here if that may help. I tried inputting the contents of the file named 'scrolling_text.html' into an iframe card but it didn't work. So if you place these files in a folder. Then open index.html in a browser, you will see it scrolls correctly; the way I want it to scroll in a card in Home Assistant.

[leaden pike]

Just wanted to check in right quick. I checked my code that I've used and it is just a standard scrolling marquee. I was able to modify it so it determines if it needs to scroll based on the number of characters in the string. It is probably not as effective as your method. But, I imagine something in there is what is giving problems. Perhaps the html-card is getting confused with something.

What I'm going to try next is to take your CSS key frames and incorporate it with my text and remove the marquee. In theory, it should act the way you're wanting it to but with my method. I'm using a custom:button-card with a custom_field. I'll post what I have at that point because right now I have a bunch of unrelated stuff currently in that card.

[flat blade]

Hey, that sounds great! Thanks so much for your attention to this! I very much appreciate it!

[leaden pike]

After working with @flat blade on this, this is what we ended up with (his version has a couple of tweaks specific to his use): ```yaml
type: custom:button-card
entity: none
show_name: false
show_icon: false
triggers_update: all
variables:
media_player: media_player.xbox_plex
styles:
card:
- border: none
- background: none
- border-radius: 0px
custom_fields:
media:
- position: absolute
- color: rgba(0,161,224,1)
- font-size: 40px
- font-weight: bold
- height: 40px
custom_fields:
media: |
[[[
var mediaString = ${states[variables.media_player].attributes.media_title} - ${states[variables.media_player].attributes.media_artist} - ${states[variables.media_player].attributes.media_album_name};
return <marquee behavior="alternate" scrollamount="3"> <span> ${mediaString} </marquee>
]]]

The `undefined - undefined - undefined` seen in the screenshot is from the track changing. This wouldn't be too hard to fix with some added JavaScript when undefined.

When the text is shorter than the width of the field, the text does not scroll. I think this is because the media custom_field sets itself to width it needs but the scroll kicks in when the overflow is more than 100% of the given space.