Hello, i have a dashboards with a lot of badges. There can be up to twenty badges. Is there a way how to wrap them to one vertical scrollable line? With card_mod or some other trick? It’s ok on PC. But on phone I don’t need to see them all at once.
#inline scrollable badges
stone void
zinc tinsel
try:
style: |
ha-card {
box-shadow: none;
}
.card-content {
max-height: 700px; #or something
overflow-y: scroll;
}```i can't remember how to make it only happen on phone and leave pc alone though
stone void
@zinc tinsel thanks. Where should I apply this for badges? It not a card in Lovelace yaml.
zinc tinsel
ahh.. nards - idk tbh, I haven't played with badges much
vocal widget
It's hard to know if you just want to hide them or display them differently based on your post, but you can change the visibility parameters on your badge to determine if one or more should be not shown on smaller devices. Otherwise you'll have to hack through the CSS for card-mod or perhaps someone has a solution they've hacked out already.
stone void
I want to show them all. But in one line. In cca is easy to set y-scroll and turn off flex wrap. But I don’t know how to apply them. Card mod is not working in this scenario. I should be more specific in question.
vocal widget
You could always make badges visible on desktop only and create tiles/mushroom cards for a sidebar that's visible only on mobile. Not a perfect solution but a workable one until you hack the CSS
serene nest
I want the same as you @stone void and I could not find a solution… Did you achieve it at the end?
stone void
Not yet. I found a hacky way via js. But it’s not stable. I’m waiting for card mod 3.5.