How to add a scroll bar to a series of nested cards?

[Dretherix]

Hi, this is my first foray into using home assistant and CSS, and I’m trying to add a scroll bar to a bunch of cards I’ve stacked on top of each other on the left side of the sidebar layout. I’ve tried to use card-mod with the code below after reading throught the documentation, but I can’t seem to get it to work. Does anyone have any suggestions?

views:
  - title: Home
    sections: []
    type: sidebar
    cards:
      - type: custom:clock-weather-card
        entity: weather.forecast_home
        view_layout:
          position: sidebar
      - type: custom:card-mod
        style:
          ha-card:
            max-height: 80vh;
            overflow-y: auto;
            scrollbar-width: none;
        card:
          type: vertical-stack
          cards:
            - type: vertical-stack
              cards:
                - type: custom:week-planner-card
                  calendars:
                    - entity: calendar.NAME
                      color: blue
                      name: NAME
                    - entity: calendar.holidays_1
                      color: green
                      name: Holidays
                      hideInLegend: true
                    - entity: calendar.holidays_2
                      color: green
                      name: Holidays
                    - entity: calendar.NAME
                      color: red
                      name: NAME
                    - entity: calendar.NAME
                      color: purple
                      name: NAME
                  weather:
                    showTemperature: true
                    showLowTemperature: true
                    showCondition: true
                    entity: weather.forecast_home
                  days: 14
                  noCardBackground: true
                  locationLink: https://www.google.com/maps/search/?api=1&query=
                  locale: en
                  texts:
                    noEvents: No Events Today
                    fullDay: Full Day
                    today: Today
                    tomorrow: Tomorrow
                  showDescription: true
                  showLocation: true
                  startingDay: sunday
                  showLegend: true
                  card_mod:
                    style: |
                      .day.past {
                        opacity: .3;
                      }
                      .event[data-entity="calendar.NAME"] {
                        background-color: rgba(0, 0, 255,.2) !important;
                      }
                      .event[data-entity="calendar.holidays"] {
                        background-color: rgba(0, 128, 0,.2) !important;
                      }
                      .event[data-entity="calendar.holidays"] {
                        background-color: rgba(0, 128, 0,.2) !important;
                      }
                      .event[data-entity="calendar.NAME"] {
                        background-color: rgba(106, 90, 205,.2) !important;
                      }
                      .event[data-entity="calendar.NAME"] {
                        background-color: rgba(255, 0, 0,.2) !important;
                      }
                - square: false
                  type: grid
                  cards:
                    - camera_view: live
                      alert_classes:
                        - motion
                        - moisture
                      sensor_classes:
                        - temperature
                        - humidity
                      type: area
                      area: front_door
                      aspect_ratio: '3:4'
                      show_camera: true
                    - type: vertical-stack
                      cards:
                        - camera_view: live
                          alert_classes:
                            - motion
                            - moisture
                          sensor_classes:
                            - temperature
                            - humidity
                          type: area
                          area: front_yard
                          show_camera: true
                        - alert_classes:
                            - motion
                            - moisture
                          sensor_classes:
                            - temperature
                            - humidity
                          type: area
                          area: sideyard
                    - type: vertical-stack
                      cards:
                        - camera_view: live
                          alert_classes:
                            - motion
                            - moisture
                          sensor_classes:
                            - temperature
                            - humidity
                          type: area
                          area: driveway
                          show_camera: true
                        - camera_view: live
                          alert_classes:
                            - motion
                            - moisture
                          sensor_classes:
                            - temperature
                            - humidity
                          type: area
                          area: living_room
                          show_camera: true
                  title: Cameras
                  columns: 3
                - type: horizontal-stack
                  cards:
                    - type: thermostat
                      entity: climate.hallway
                      features:
                        - type: climate-hvac-modes
                    - type: entities
                      entities:
                        - fan.winix_office
                        - sensor.winix_office_aqi
                        - sensor.winix_office_filter_life
                        - fan.winix_kitchen
                        - sensor.winix_kitchen_aqi
                        - sensor.winix_kitchen_filter_life
                        - fan.winix_living_room
                        - sensor.winix_living_room_aqi
                        - sensor.winix_living_room_filter_life
                  title: Home Controls
      - type: todo-list
        entity: todo.my_tasks
        title: To Do
        hide_completed: true
        view_layout:
          position: sidebar

[parautenbach (Pieter Rautenbach)]

Perhaps one of these?

Lovelace: Swiper card

I created a card with swiper, that lets you flick through multiple cards. You can use (almost?) all options of swiper, these can be found here. More info can be found in the repo: https://github.com/bramkragten/custom-ui/tree/master/swipe-card A few config examples: [image] Full width cards with scrollbar: - type: custom:swipe-card parameters: spaceBetween: 8 scrollbar: hide: false draggable: true snapOnRelease: true …

CSS-Swipe-Card - Simple Swipe card with lots of customization options

Hello Community, here is my CSS-Swipe-Card, which is my first custom card for Home Assistant. I´ve created it for my personal use in the first place, but as it´s working really well, I´m sure others might enjoy it too. [1000065495] CSS-Swipe-Card Yes, there is already a swiper-card. First, this card is amazing and comes with lots of features. So why a new card? my card is based on CSS and JS and is not based on a third party library With CSS-Swipe-Card you can use custom:button-card with n…

I use the former.

[Dretherix]

This looks like a promising alternative. I’ll give it a shot, thanks.

[Ildar_Gabdullin]

@Dretherix

and I’m trying to add a scroll bar to a bunch of cards I’ve stacked on top of each other on the left side of the sidebar layout

In your code only the 1st & 3rd card have “position: sidebar” set, not that huge vertical-stack.
So, it is unclear what “stacked” cards you wish to scroll.

@Dretherix

      - type: custom:card-mod
        style:
          ha-card:
            max-height: 80vh;
            overflow-y: auto;
            scrollbar-width: none;
        card:

This is a wrong card-mod code, should be like

      - type: custom:mod-card
        card_mod:
          style:
            xxx {
              ...
            }
        card:

If you choose a “scrollable sidebar” way - suggest to ask in card-mod-theme thread. Solution was posted here.