Make weather-card forecasts scrollable with card-mod

Configuration Frontend
1

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

2

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’ :slight_smile: … 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

image
image517×642 27.2 KB

3

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):

Screenshot 2024-05-06 at 13.26.01
Screenshot 2024-05-06 at 13.26.011084×468 24.9 KB

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;
            }
4

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

5

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
        }
6

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:

Screenshot 2024-05-06 at 15.17.06
Screenshot 2024-05-06 at 15.17.061274×1116 90.6 KB

But the moment I close the inspector, the scroll bar disappears and the card becomes fixed:

Screenshot 2024-05-06 at 15.17.23

7

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).

8

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

9

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

10

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 :wink:

11

May I ask what type of card this is? I really like it!

12

its the meteo-france card plus some tweaking. code is in the 5th post

13

Thanks so much!