I was looking for a way to imbed vertical scrolling in a card. Similar to the swipe card but instead of left and right I was looking for up and down.
Did you find a solution? I’m wanting the same. Tried implementing it with the swiper card by setting the “direction” parameter to “vertical” but cannot get it to work.
I did notice the the swiper API you can change the direction from horizontal to vertical but it doesn’t work as expected. When I made the change it just placed the cards in one long string down the page. the swipe up and down did work but was massively long spaces.
I’ll still need to play around whit it. attached the link if you wanted to play around with it as well.
Looking for the same. Any success?
Card-mod thread → 1st post → link at the bottom → Entities card → scrollbar
Similarly for other cards.
Hi. .ty. Not looking to add a scroll bar but for a way to intercept vertical swipes
Hey, i searched for the same to create a TV Channel grid with the ability to scroll.
My way to do it was to use the vertical-stack-in-card in combination with card_mod.
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
margin-top: 15px !important;
background: none !important;
box-shadow: none !important;
border: none !important;
max-height: 450px !important;
min-height: 450px !important;
overflow-y: auto !important;
display: block !important;
padding-right: 10px
}
ha-card::-webkit-scrollbar {
width: 8px;
}
ha-card::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
ha-card::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.4);
border-radius: 10px;
}
ha-card::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.6);
}
cards:
- type: grid
columns: 4
square: false
cards:
- type: custom:button-card
tap_action:
action: none
card_mod:
style: |
ha-card {
width: 100px;
height: 100px;
border-radius: 10px;
border-size: 1px;
background-image: url("https://www.ufa.de/app/uploads/2019/12/2000px-Das_Erste-Logo_klein.svg.png");
background-size: 60%60%;
background-repeat: no-repeat;
background-position: center;
}
I left out the last buttons to not make my post to long.
As far as i understand the important part is
max-height: 450px !important;
min-height: 450px !important;
overflow-y: auto !important;
display: block !important;
The other ha-card parts are there to adjust the scroll bar.
