Hi all
I’m using Lovelace animated weather card which only allows me to display a forecast of a maximum of 6 hours. If I set overflow-x for the ha-card to scroll then I can happily scroll to see the other 18 hours. My problem is that I can’t achieve this with card-mod.
Here is my configuration:
type: custom:weather-card
entity: weather.tomorrow_io_chiesa_nuova_daily
current: false
name: Rome
details: false
forecast: true
forecast_type: hourly
number_of_forecasts: 24
card_mod:
style: |
ha-card
{
overflow-x: scroll !important;
background: red;
}
The background:red is taking effect but the overflow is overwritten* by the constructed stylesheet which I thinkis coming from here.
*Note: the situation is more confusing, sometimes it works, sometimes it doesn’t, sometimes it works if the Chrome Inspector is open, but not if I close it… I presume this a timing issue.
I’ve tried using :host, :host ha-card, and various other things but I just can’t find the way to do this definitively, short of forking weather-card.
Any suggestions?
thanks
I am likely not able to present any help but I am trying to find out what you want, as you state to be able to get the 18hrs but why(!) or where (!) would you need card-mod then?
I am using a adaptation of this card
EDIT: reading the post again…it is also confusing to me but that may be because of ‘me’ 
… what are you trying to achieve?
This is my (adapted) set of cards based on above. The first daily view allows to swipe. the hourly is just there
What I’m trying to achieve is essentially what you have in your daily forecast example: the ability to swipe to see the remaining days (or hours in my case):
I’m not sure how you’ve achieved this, I presume by forking the code? I’d prefer not to do that if I don’t have to.
This is the config I’m using at the moment. The card_mod bit is not having the desired effect:
views:
- title: Home
cards:
- type: custom:weather-card
entity: weather.tomorrow_io_chiesa_nuova_daily
forecast: true
forecast_type: hourly
number_of_forecasts: 24
current: false
details: false
card_mod:
style: |
ha-card {
overflow-x: scroll;
}
you need to set the max width, and probably also specify the card:
card_mod:
style: |
ha-card.type-custom-weather-card {
max-width: 150px;
overflow-x: scroll;
}
same for vertical ofc, and use max-height
I donot know that one but mine does ‘swipe’
My code below
type: custom:swipe-card
reset_after: 10
parameters:
autoHeight: false
initialSlide: 0
centeredSlides: true
loop: false
followfinger: true
cards:
- type: custom:meteofrance-weather-card
entity: weather.home
number_of_forecasts: '14'
current: false
details: false
hourly_forecast: false
daily_forecast: true
number_of_daily_forecasts: '14'
animated_icons: true
wind_forecast_icons: false
alert_forecast: false
one_hour_forecast: false
card_mod:
style: |
ha-card {--ha-card-border-width: 0;
background: none }
ha-card > ul > li:nth-child(7) {
border-right: 0px !important;
}
ha-card > ul > li:nth-child(8) {
display: none;
}
ha-card > ul > li:nth-child(9) {
display: none;
}
ha-card > ul > li:nth-child(10) {
display: none;
}
ha-card > ul > li:nth-child(11) {
display: none;
}
ha-card > ul > li:nth-child(12) {
display: none;
}
ha-card > ul > li:nth-child(13) {
display: none;
}
ha-card > ul > li:nth-child(14) {
display: none;
}
- type: custom:meteofrance-weather-card
entity: weather.home
number_of_forecasts: '14'
current: false
details: false
hourly_forecast: false
daily_forecast: true
number_of_daily_forecasts: '14'
animated_icons: true
wind_forecast_icons: false
alert_forecast: false
one_hour_forecast: false
card_mod:
style: |
ha-card > ul > li:nth-child(1) {
display: none;
}
ha-card > ul > li:nth-child(2) {
display: none;
}
ha-card > ul > li:nth-child(3) {
display: none;
}
ha-card > ul > li:nth-child(4) {
display: none;
}
ha-card > ul > li:nth-child(5) {
display: none;
}
ha-card > ul > li:nth-child(6) {
display: none;
}
ha-card > ul > li:nth-child(7) {
display: none;
}
ha-card {
border-width: 0px !important;
background: none
}
Thanks for the response. The use of the class name successfully overrides the overflow property from the constructed stylesheet, but it is very weird. The card is only scrollable while I have the Chrome inspector open:
But the moment I close the inspector, the scroll bar disappears and the card becomes fixed:
Thanks for the response. The swipe-card is interesting for other purposes, but not quite what I’m after here.
I tried installing meteofrance-weather-card but couldn’t make it display anything. (I also tried meteo-france-weather-card but the display wasn’t like yours).
did you try !important on the overflow: ?
My experiment was working fine in Safari desktop, but I dont think I had to override the property. not sure, maybe give it a try?
otherwise hop over here 🔹 Card-mod - Add css styles to any lovelace card - #1288 by Ildar_Gabdullin and post your quest
Yes, but still didn’t help. I think there is something else going on here. Your suggestion of using ha-card.type-custom-weather-card successfully overwrote the overflow property, but the scrollbar only worked while the Inspector was open. As soon as I closed it, the scrollbar disappeared.
I then tried editing the weather-card.js file directly and had exactly the same experience.
I think that there is an event listener which overrides the drag action to prevent scrolling (but for some reason doesn’t do the same thing when the Inspector is open).
based on my experiments, card-mod may not be relevant. any idea where would be the right palce to ask? (I’m new here)
many thanks
you ask but I had already suggested.
that would be the place to at least confirm your suspicion… and continue from there.
it does also fit your topic title 
