ofekashery/vertical-stack-in-card

📐 Home Assistant Card: Group multiple cards into a single sleek card.

Vertical Stack In Card

Vertical Stack In Card lets you you to group multiple cards into a single sleek card in the Home Assistant UI.

Options

Name	Type	Default	Description
type	string	Required	custom:vertical-stack-in-card
cards	list	Required	List of cards
title	string	Optional	Card title
horizontal	boolean	Optional	Default: false
styles	object	Optional	Adds custom CSS directives to child cards

Installation

VSIC is available in HACS (Home Assistant Community Store).

1. Download the card

Install the VSIC by copying vertical-stack-in-card.js to <config directory>/www/vertical-stack-in-card.js, or via bash:

wget https://raw.githubusercontent.com/ofekashery/vertical-stack-in-card/master/vertical-stack-in-card.js
mv vertical-stack-in-card.js /config/www/

2. Link the card to your Lovelace UI

The manual way:

Link vertical-stack-in-card inside your ui-lovelace.yaml

resources:
  - url: /local/vertical-stack-in-card.js?v=0.4.4
    type: js

Through the GUI:

Alternatively, with Home Assistant 2021.3 or later, click here. Using My Home Assistant, that will bring up the GUI for Resources. Click the Plus to add a new resource. The url is the path to your downloaded file. Replace <config directory>/www/ with /local/.

Finish by clicking "Create" and refresh your browser.

3. Use the card somehere.

Add a custom card in your ui-lovelace.yaml.

Example

type: 'custom:vertical-stack-in-card'
title: My Card
cards:
  - type: glance
    entities:
      - sensor.temperature_sensor
      - sensor.humidity_sensor
      - sensor.motion_sensor
  - type: entities
    entities:
      - switch.livingroom_tv
      - entity: script.livingroom_receiver
        name: Receiver
      - switch.livingroom_ac

Credits

• ofekashery
• ciotlosm
• thomasloven

vertical-stack-in-card's Issues

allow separation or padding between entities

chart with std vertical stack:

Too much separation -

chart with custom stacking card

no separation separation .

of course i may be missing something , if there is a way to adjust it that im not aware of . thank you

Would need more space between title and images in cards

Not really sure if it's possible or not (or if one of the feature requests already entered is specifically about that) but would it be possible to add space between the title and the first picture cards (see picture, it feels like it should have the same sapce like I'm poiting with the arrow... Does it make sense?

Space appearing between different entities

Hi guys,

I am using vertical-stack-in-card in conjunction with horizontal-card and button-card. At first it seemed to work just perfect, but now it will occasionally display the entities with gaps in between like so:

Here is an example of the setup with one entity:

type: 'custom:vertical-stack-in-card'
cards:
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        color_type: card
        entity: binary_sensor.pir_sensor
        show_last_changed: true
        size: 50%
        styles:
          name:
            - font-size: 12px
            - font-weight: bold
          label:
            - font-size: 12px
        state:
          - value: 'on'
            color: yellow
            icon: 'mdi:motion-sensor'
            styles:
              card:
                - animation: blink 2s linear infinite
          - operator: default
            color: null
            icon: 'mdi:motion-sensor'

Allow card to be fully conditional

My vertical-stack-in-card is defined like the following:

      - type: 'custom:vertical-stack-in-card'
        title: Termóstato Sala
        cards:
          - type: thermostat
            entity: climate.termostato_sala
          - type: entities
            entities:
              - entity: input_select.morning_from_time
              - entity: input_select.morning_to_time
              - entity: input_select.night_from_time
              - entity: input_select.night_to_time

I tried combining the usage of conditional card with vertical-stack-in-card, but the following config doesn't seem to work (syntax errors appear when saving):

      - type: conditional
        conditions:
          - entity: input_select.season_mode
            state: Winter
        card:
          type: 'custom:vertical-stack-in-card'
          title: Termóstato Sala
          cards:
            - type: thermostat
              entity: climate.termostato_sala
            - type: entities
              entities:
                 - entity: input_select.morning_from_time
                 - entity: input_select.morning_to_time
                 - entity: input_select.night_from_time
                 - entity: input_select.night_to_time

After this, I tried the following:

      - type: 'custom:vertical-stack-in-card'
        title: Termóstato Sala
        cards:
          - type: conditional
            conditions:
              - entity: input_select.season_mode
                state: Winter
            card:
              type: thermostat
              entity: climate.termostato_sala
          - type: conditional
            conditions:
              - entity: input_select.season_mode
                state: Winter
            card:
              type: entities
              entities:
                - entity: input_select.morning_from_time
                - entity: input_select.morning_to_time
                - entity: input_select.night_from_time
                - entity: input_select.night_to_time

and it works, but I get a title only card when condition is not fulfilled.

Would it be possible to make the card fully disappear if no elements are visible?

please allow entity: divider - feature request

HI,
as per title, it would be very nice if we could use the type: divider in the vertical stack.

not sure if Im doing it wrong, but

  - type: custom:vertical-stack-in-card
    title: Raspberry Pi3
    cards:
      - type: entities
        show_header_toggle: false
        entities:
          - sensor.rpi_last_boot_macro
          - sensor.last_boot
          - device_tracker.hassio
          - binary_sensor.hassio
      - type: divider
      - type: glance
        entities:
        - sensor.disk_free_home
        - entity: sensor.disk_use_home
          name: Disk use
        - entity: sensor.disk_use_percent_home
          name: Disk %
        - entity: sensor.memory_use
          name: Mem Use
        - entity: sensor.memory_use_percent
          name: Mem %
      - type: entities
        show_header_toggle: false
        entities:
        - sensor.ipv4_address_eth0
        - sensor.external_ip

results in:

thanks for considering

Doesn't Work in 0.107.0

As title says ... like the card doesn't exist:
"Custom element doesn't exist: layout-card."

Errors in log with virtual-stack-in-card and swipe-card

I have a lot of errors in log with vertical-stack-in-card after us it with swipe-card.

https://_redacted_/local/lovelace/vertical-stack-in-card.js?v=0.0.6:58:45 Uncaught TypeError: Cannot read property 'childNodes' of null

My config:

         - type: custom:vertical-stack-in-card
            title: 'Salon'
            cards:
              - type: custom:swipe-card
                cards:
                  - type: sensor
                    entity: sensor.temperature_salon
                  - type: sensor
                    entity: sensor.humidity_salon
                  - type: sensor
                    entity: sensor.co2_salon
                  - type: sensor
                    entity: sensor.illumination_salon
              - type: entities
                show_header_toggle: false
                entities:
                  - entity: binary_sensor.motion_salon
                    secondary_info: last-changed
                  - climate.thermostat_salon
                  - switch.light_bulbs_salon
                  - switch.light_leds_salon
                  - light.lamp_salon
                  - input_select.light_scenes_salon
                  - input_select.salon_harmony

add custom updater

Could you add this to custom updater?

Would be great!

https://github.com/custom-components/custom_updater

Padding missing

I'm trying to put two cards inside this card, but the padding is gone for the fold-entity-row. Could also be others, hard to say due to their layout. Please see photo, one standalone fold-entity-row with correct padding, and one inside a vertical-stack-in-card w/o padding.

EDIT: I'm using HA v0.81.6

  - title: Avansert
    id: avansert
    icon: mdi:settings
    cards:
      - type: entities
        title: Økonomi
        entities:
        - type: custom:fold-entity-row
          head: sensor.dnb_ask_beholding
          items:
            - sensor.dnb_health_care_1_dag
            - sensor.dnb_health_care_kurs
            - sensor.dnb_teknologi_1_dag
            - sensor.dnb_teknologi_kurs

      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:weather-card
            title: Været
            entity_weather: weather.metno
            entity_sun: sun.sun
            entity_wind: sensor.vindstyrke_tekst
          - type: glance
            entities:
             - sun.sun
             - sensor.current_uv_level
             - sensor.current_uv_index
             - sensor.max_uv_index

      - type: custom:vertical-stack-in-card
        title: Strømforbruk
        cards:
          - type: gauge
            entity: sensor.electricity_price
            title: 'Strømpris'
            unit_of_measurement: 'kr'
            min: 0
            max: 1.8
            severity:
              green: 0
              yellow: 0.6
              red: 1.2
          - type: custom:fold-entity-row
            head: sensor.electricity_price
            items:
              - sensor.qubino_zmnhdd1_flush_dimmer_power
              - sensor.fibaro_system_fgd212_dimmer_2_power
              - sensor.fibaro_system_fgd212_dimmer_2_power_3
              - sensor.fibaro_system_fgd212_dimmer_2_power_5
              - sensor.fibaro_system_fgd212_dimmer_2_power_7
              - sensor.fibaro_system_fgd212_dimmer_2_power_10
              - sensor.fibaro_system_fgd212_dimmer_2_power_12
              - sensor.fibaro_system_fgwpef_wall_plug_gen5_power

Title using accent color instead of main color in 2.0

Just updated and now any of my vertical stack in a cards with titles now shows the accent color and not the main color like it did in previous versions. Is there a style option to change this?

Update release version

Can you update the release version to 0.1.0?
The customer card updater is now showing 0.0.9 as that is the latest version of the releases.

More info on ludeeus/customjson#2.

Uncaught SyntaxError: Unexpected token <

Hi,

This card is exactly what I've been needing! Unfortunately when I try to use it on 0.84.6 I get the following error in the log:

https://MYHOST:8123/local/vertical-stack-in-card.js?v=0.0.9:7:1 Uncaught SyntaxError: Unexpected token <

In the lovelace UI it says the card doesn't exist. Here is my resources (as you can see I have a lot of custom cards, they all work well- your .js is sitting with all the other ones in my www folder with same permissions and everything).

title: Home

# Include external resources

resources:

  - url: /local/vertical-stack-in-card.js?v=0.0.9
    type: js
  - url: /local/mini-media-player-bundle.js?v=0.9.2
    type: module
  - url: https://unpkg.com/[email protected]/moment.js
    type: js
  - url: /local/custom_ui/calendar-card/calendar-card.js?v=1.0.1
    type: module  
  - url: /local/button-card.js
    type: module
  - url: /local/air-visual-card.js 
    type: js
  - url: /local/custom-weather-card-chart.js
    type: module
  - url: /local/simple-thermostat/simple-thermostat.js?v=1
    type: module

Here is the stack I tried to make, was a straight replacement for a vertical stack that was working fine:

    - type: custom:vertical-stack-in-card
      title: Entrance
      cards:
    
      - type: history-graph
        title: 'Entrance'
        entities:
        - climate.entrance


      - type: entities
        entities:
        - climate.entrance

Does not support special row elements

When adding an entities card all is well except if special row elements are included.

https://www.home-assistant.io/lovelace/entities/#special-row-elements

e.g. type: divider throws an error in this:

cards:
  - type: entities
    entities:
      - entity: switch.lounge_dehumidifier
      - type: divider
      - entity: automation.lounge_dehumidifier_direct_automation
      - entity: input_number.rumpus_dehumidifier_condensation_set
      - entity: input_number.lounge_dehumidifier_outside_temp_set
      - type: divider
      - entity: automation.lounge_dehumidifier_forecast_automation
      - entity: input_datetime.lounge_dehmidifier_run_time
      - entity: input_number.lounge_dehumidifier_rh_set
      - entity: input_number.lounge_dehumidifier_forecast_temp_set
      - type: divider
      - entity: input_boolean.lounge_dehumidifier_only_run_if_away
      - entity: input_boolean.lounge_dehumidifier_mute_for_movie
      - entity: input_number.lounge_dehumidifier_run_time
      - show_header_toggle: false
  - color_thresholds:
      - color: '#0da035'
        value: -1
      - color: '#e0b400'
        value: 1800
      - color: '#e45e65'
        value: 2100
    entities:
      - sensor.lounge_dehumidifier_power
    group: false
    hour24: true
    line_width: 2
    points_per_hour: 12
    show:
      icon: false
      labels: true
      name: false
      state: true
    type: 'custom:mini-graph-card'
title: Lounge Dehumidifier Control
type: 'custom:vertical-stack-in-card'

The entities card when not used in a vertical-stack-in-card displays as expected.

Padding and boxshadow isn't removed

When placed inside a vertical-stack the padding and boxshadow isn't removed immediately. Sometimes it disappears after a second, sometimes after 5 or so. It has to set the hass object (line 46) a second time for the boxShadow and padding to disappear. I'm running the latest version.
I would debug it more myself, but I ain't got time right now. If no one has solved it next weekend I may have a second look at it.

Screenshot (I've marked the problems in a red box):

Configuration:

views:
  - icon: mdi:home
    title: Start
    cards:
      - type: vertical-stack
        cards:
          - type: custom:vertical-stack-in-card
            title: 'Vardagsrummet'
            cards:
              - type: glance
                entities:
                  - entity: sensor.temperature_158d0001d5c2fe
                  - entity: sensor.humidity_158d0001d5c2fe
                  - entity: binary_sensor.fibaro_motion_2_sensor
                  - entity: binary_sensor.fibaro_door_1_sensor
              - type: glance
                entities:
                  - entity: light.vardagsrumslampa
                    name: 'Tak'
                    tap_action: toggle
                  - entity: switch.sonoff2
                    tap_action: toggle
                  - entity: switch.fibaro_wp_5_switch
                    tap_action: toggle
                  - entity: switch.sonoff10
                    name: 'Klotlampa'
                    tap_action: toggle
                  - entity: switch.sonoff1
                    name: 'Fönster'
                    tap_action: toggle
                  # - entity: switch.sonoffs201
                  #   name: 'Balkong'
                  #   tap_action: toggle
                  - entity: switch.sonoffs203
                    tap_action: toggle
          - type: custom:vertical-stack-in-card
            title: 'Köket'
            cards:
              - type: glance
                entities:
                  - entity: binary_sensor.fibaro_motion_3_sensor
                    name: '  '
                  - entity: binary_sensor.fibaro_flood_1_sensor
                    name: '  '
                  - entity: sensor.temperature_158d0001fa6be3
                  - entity: sensor.temperature_158d0001fa6f76
              - type: glance
                entities:
                  - entity: switch.fibaro_wp_8_switch
                    name: 'Fönster'
                    tap_action: toggle
                  - entity: switch.fibaro_wp_11_switch
                    tap_action: toggle
          - type: custom:vertical-stack-in-card
            title: 'Extrarummet'
            cards:
              - type: glance
                entities:
                  - entity: sensor.temperature_158d0001f53709 #extrarummet
                    name: ' '
                  - entity: sensor.humidity_158d0001f53709 #extrarummet 
                    name: ' '
                  - entity: switch.sonoff8
                    name: 'Skåp'
                    tap_action: toggle
                  - entity: switch.sonoff9
                    name: 'Fönster'
                    tap_action: toggle

If you nest vertical-stack-in-card in Conditional card, the display is incorrect

If you nest vertical-stack-in-card in Conditional card, the display is incorrect.
If the condition is displayed in the state of True, it works normally if turned on / off, but when the condition is displayed in the state of False, the vertical-stack-in-card is displayed while being hidden. There is none.

I'm ON / OFF using input_boolean.

Is this movement a specification?

Integration with other custom cards

Unsure if this error is related to the mini-graph custom card or this one or how they interact. Getting the following error when the view is refereshed.

https://duck.duckdns.org/local/custom_ui/vertical-stack-in-card.js?v=0.0.2:61:74 Uncaught TypeError: Cannot read property 'style' of null

The mini-graph card also doesn't appear to integrate cleanly like other cards do into the vertical-card-stack. See imugr link. https://imgur.com/Vuer2xp (note the borders around the graph cards)

Relevant parts of my config:

resources:
  #https://github.com/thomasloven/lovelace-slider-entity-row
  - url: /local/custom_ui/slider-entity-row.js
    type: js
  #https://github.com/kalkih/mini-graph-card
  - url: /local/custom_ui/mini-graph-card.js?v=0.0.1
    type: module
  #https://github.com/custom-cards/vertical-stack-in-card
  - url: /local/custom_ui/vertical-stack-in-card.js?v=0.0.2
    type: js

title: Home
views:
  - title: Rooms
    icon: mdi:home
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: entities
            title: HVAC Status
            entities:
              - entity: climate.downstairs
                name: Nest Thermostat
          - type: glance
            entities:
              - entity: binary_sensor.downstairs_thermostat_fan
                name: Fan
              - entity: sensor.downstairs_thermostat_hvac_state
                name: State
                icon: mdi:thermostat
              - entity: sensor.downstairs_thermostat_operation_mode
                name: Mode
                icon: mdi:information-outline
              - entity: sensor.downstairs_thermostat_target
                name: Target
                icon: mdi:thermometer-lines
              - entity: sensor.downstairs_away_mode
                name: Away
                icon: mdi:home-outline
           - type: horizontal-stack
             title: Nest Graphs
             cards:
               - type: "custom:mini-graph-card"
                 entity: sensor.downstairs_thermostat_temperature
                 name: Temperature
                 line_color: '#e74c3c'
                 line_width: 8
                 more_info: false
                 accuracy: 25
               - type: "custom:mini-graph-card"
                 entity: sensor.downstairs_thermostat_humidity
                 name: Humidity
                 line_color: '#3498db'
                 line_width: 8
                 more_info: false
                 accuracy: 25

Error "searchEles.childNodes" with version 0.0.8

Hi,

I'm running version 0.81.6 of HA and everything works fine. But i get this error:

https://myip:***/local/custom_ui/vertical-stack-in-card.js?v=0.0.8:58:44 TypeError: null is not an object (evaluating 'searchEles.childNodes')

parts of my config:

  - url: /local/custom_ui/vertical-stack-in-card.js?v=0.0.8
    type: js

  - id: 1
    icon: mdi:home-assistant
    name: Casa
    cards:
      - type: vertical-stack
        cards:
          - type: custom:vertical-stack-in-card
            title: Casa
            cards:
              - type: glance
                entities:
                  - alarm_control_panel.house
                  - sensor.disarmed_home_away
                  - sensor.interruptorcamera
                  - switch.interruptor_camera
              - type: entities
                entities:
#                    - type: section
#                    - type: divider
                  - entity: binary_sensor.sensor_porta_principal
                    secondary_info: last-changed
                  - entity: sensor.porta_rua_time
                  - type: section
                  - entity: binary_sensor.corredor
                    secondary_info: last-changed
                  - entity: sensor.interruptorsirene
                    secondary_info: last-changed
                  - entity: switch.interruptor_sirene

Errors when glance card inside vertical-stack-in-card [HA 0.80.1]

After update HA to 0.80.1 I have a lot errors in log:

2018-10-15 21:29:04 ERROR (MainThread) [frontend.js.latest.201810140] https://__redacted__/local/lovelace/vertical-stack-in-card.js?v=0.0.6:58:45 Uncaught TypeError: Cannot read property 'childNodes' of null

This happens only when I have glance card inside verical-stack-in-card.

Example config:

          - type: custom:vertical-stack-in-card
            cards:
              - type: glance
                title: 'Salon'
                show_name: false
                column_width: calc(100% / 4)
                entities:
                  - sensor.temperature_salon
                  - sensor.humidity_salon
                  - sensor.co2_salon
                  - sensor.illumination_salon
              - type: entities
                show_header_toggle: false
                entities:
                  - entity: binary_sensor.motion_salon
                    secondary_info: last-changed
                  - climate.thermostat_salon
                  - switch.light_bulbs_salon
                  - switch.light_leds_salon

Beetwen glance and entities card there is a line. On older versions of HA there wasn't any line.

Uncaught SyntaxError: Unexpected token '<'

I followed the instructions to install and got this error, any ideas what the cause is please?

Fri Nov 08 2019 15:34:20 GMT+0000 (Greenwich Mean Time)
https://www.myurl.com/local/vertical-stack-in-card.js?v=0.1.3:7:1 Uncaught SyntaxError: Unexpected token '<'

No custom button color for state on

with the latest version, if custom buttons are used, I no longer know if the button is on or off. the key no longer lights up when it is on

Control the separation (padding or margin?) between interior cards

My use case: I use vertical-stack-in-card to stack 'entities' cards, one of which is conditional (so it appears or disappears depending on the state of a switch).

The case works fine however there is a very large amount of padding between the adjacent 'entities' cards; ideally the separation between the last entity of the first card and the first entity of the second card should be the standard separation between entities within a normal card. Currently that separation is a lot more than that:

Is it possible to make this separation a parameter so we can reduce it and make stacking of entities cards more 'normal'

Newest version is Messing with css of stacked elements.

The latest version of this card is messing with the css of elements below it.

Ex. button-Cards is no longer showing background-color but is transparent.
(This behaviour is new)

No card type configured.

Hassio version 0.103.2.
I have downloaded file to directory "/config/www/vertical-stack-in-card.js".
Added this to yaml resources:

resources:
  - type: module
    url: /local/custom-weather-card-chart.js
  - type: module
    url: /local/mini-graph-card-bundle.js?v=0.6.0
  - type: js
    url: /local/vertical-stack-in-card.js?v=0.1.3

Trying to use card:

- type: 'custom:vertical-stack-in-card'
  title: My Card
  cards:
    - type: entities
      entities:
        - sensor.cpu_temperature

Error:

No card type found

"element.setConfig is not a function" in Android Chrome browser

LOVE the look of this card, and it works great on desktop browsers, but Chrome Canary, regular Chrome, and the Samsung Internet browser give me the above error.

I DO have javascript_version: latest in my config as well.

Any ideas how to fix? Thank you!

Please return back title color

The title color was changed in 0.2.0. Now it differs from title color of glance or entities card block, what makes lovelace very innacurate.
Please, return back default title color or add special tag for lovelace config in order to customize the color.

Error log filling

I'm using latest 0.0.6 version
My error log keeps filing every time I open tab with this component in it.

https://secert.url.org/local/components/vertical-stack-in-card.js?v=0.0.6:1:1 Uncaught SyntaxError: Identifier 'VerticalStackInCard' has already been declared
https://secret.url.org/local/components/vertical-stack-in-card.js?v=0.0.6:61:74 Uncaught TypeError: Cannot read property 'style' of null
Here is my Lovelace config:

          - type: custom:vertical-stack-in-card
            cards: 
              - type: horizontal-stack
                cards:
                  - type: "custom:button-card"
                    entity: group.svjetla
                    icon: mdi:lightbulb-outline
                    color: auto
                    action: more_info
                    default_color: rgb(255, 233, 155)
                    color_type: icon
                    name: Rasvjeta
                  - type: "custom:button-card"
                    entity: light.rgb_traka
                    icon: mdi:palette
                    color: auto
                    color_type: icon
                    name: RGB
                    default_color: rgb(255, 233, 155)
                  - type: "custom:button-card"
                    entity: light.luster
                    icon: mdi:ceiling-light
                    name: Luster
                    color: auto
                    default_color: rgb(255, 233, 155)
                    color_type: icon
                  - type: "custom:button-card"
                    entity: light.led_traka
                    icon: mdi:hotel
                    name: Krevet
                    color: auto
                    default_color: rgb(255, 233, 155)
                    color_type: icon
    

And resources:

  - url: /local/components/vertical-stack-in-card.js?v=0.0.6
    type: js

Problem useing "horizontal-stack" or "vertical-stack" inside the "vertical-stack-in-card"

Hi , I got a problem with using horizontal-stack or vertical-stack inside the custom card ,
the warning i got:

2018-08-06 12:38:57 ERROR (MainThread) [frontend.js.latest.201808040] https://MYSERVER.COM/local/custom_components/vertical-stack-in-card.js?v=0.0.4:58:38 Uncaught ReferenceError: root is not defined

my config is :

views:
#### FIRST view ####
  - title: Home
    id: Home
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: entities
            entities:
              - group.allmylights
          ##
          - type: horizontal-stack
            cards:
              - type: entities
                show_header_toggle: false
                entities:
                  - light.white_bulb
                  - light.living_room_color_bulb
                  - type: divider
                  - light.sonoff_hallway_light
                  - light.gateway_light_34ce0088d2f7
              - type: entities
                show_header_toggle: false
                entities:
                  - light.sonoff_light
                  - light.philips_bulb
                  - type: divider
                  - light.desk_lamp
                  - switch.bedroom_fan_light
                  
          ### all my lights in Vertical stak ####   
          - type: vertical-stack
            cards:
              - type: horizontal-stack
                cards:
                  - type: picture-glance
                    image: /local/MyEntities/livingroom.jpeg
                    entities:
                      - light.white_bulb
                      - light.living_room_color_bulb
                  - type: picture-glance
                    image: /local/MyEntities/kitchen.jpeg
                    entities:
                      - light.sonoff_light
                      - light.philips_bulb
                ######      
              - type: horizontal-stack
                cards:
                
                  - type: picture-glance
                    image: /local/MyEntities/hallway.jpeg
                    entities:
                      - light.sonoff_hallway_light
                      - light.gateway_light_34ce0088d2f7
                  - type: picture-glance
                    image: /local/MyEntities/bedroom.jpeg
                    entities:
                      - light.desk_lamp
                      - switch.bedroom_fan_light

its also appears when I use "vertical-stack" only, or "horizontal-stack" only

its look like the place the problem appears is here:

    connectedCallback() {
        this._refCards.forEach((element) => {
            if (element.shadowRoot) {
                if (!element.shadowRoot.querySelector('ha-card')) {
                    var searchEles = root.childNodes[index].shadowRoot.getElementById("root");
                    if (!searchEles) {
                        searchEles = root.childNodes[index].shadowRoot.getElementById("card");
                    }
                    searchEles = searchEles.childNodes;
                    for(var i = 0; i < searchEles.length; i++) {
                        searchEles[i].style.margin = "0px";
                        searchEles[i].shadowRoot.querySelector('ha-card').style.boxShadow = 'none';
                        searchEles[i].shadowRoot.querySelector('ha-card').style.paddingBottom = '0px';
                    }
                } else {
                    element.shadowRoot.querySelector('ha-card').style.boxShadow = 'none';
                    element.shadowRoot.querySelector('ha-card').style.paddingBottom = '0px';
                    element.shadowRoot.querySelector('ha-card').style.paddingTop = '0px';
                }
            }
        });
    }

I am Using HA 0.75.1 , vertical-stack-in-card V 0.0.4 (out few minute ago) , and the problem in Safari latest , and Chorme latest

P.S before V 0.0.4 of vertical-stack-in-card when i was try to do it , all the frontend was freeze , with logs filled up every click i do.

Transparency still stacks after 0.2.0

Unfortunately the latest release didnt fix the problem for me.

Styling vertical-stack-in-card

Would be great if there was style: <list of styles> to modify vertical-stack-in-card apperance. :)

ha-card-border and ha-card-box-shadow

Hi there,
I've been using this card for a while and it is very useful, thanks for that!

I was now sstarting to play around with latest configuration for themes that came out I believe with HA version 0.88 which are:

  ha-card-border-radius: '20px'
  ha-card-box-shadow: 3px 3px rgba(0,0,0,0.4)

What I have noticed is that whenever I used this card, the corners and the shadows are not showed, it doesn't happen with other cards (even custom).

Here an example, the right column is done using the vertical-stack-in-card:

Thanks
Andrea

Support for Mobile apps

Would be greate if this supported mobile...
When viewed through the app, you get:
"custom:vertical-stack-in-card" card is not supported yet
The standard vertical stack supports this (just shows the individual components within it)

Thanks

In editor lovelace title show not on card

When i open editor lovelace and when add title to card it is show above card. When close editor show on card correct.

2 kinds of warnings when using "vertical-stack" card

Hi, I getting 2 warnings ,
In Safari (Latest Version 11.1.1 (13605.2.8) ) only :
https://MYSERVER.COM/local/custom_components/vertical-stack-in-card.js?v=0.0.6:61:74 TypeError: null is not an object (evaluating 'searchEles[i].shadowRoot.querySelector('ha-card').style')
In Gogle Chrome (Latest Version 67.0.3396.99) only :
https://MYSERVER.COM/local/custom_components/vertical-stack-in-card.js?v=0.0.6:61:74 Uncaught TypeError: Cannot read property 'style' of null

The config:

      - type: custom:vertical-stack-in-card
        cards:
          - type: entities
            entities:
              - light.living_room_color_bulb
          - type: vertical-stack
            cards:
              - type: horizontal-stack
                cards:
                  - type: picture-glance
                    image: /local/MyEntities/livingroom.jpeg
                    entities:
                      - light.white_bulb
                      - light.living_room_color_bulb
                  - type: picture-glance
                    image: /local/MyEntities/kitchen.jpeg
                    entities:
                      - light.sonoff_light
                      - light.philips_bulb
                ######      
              - type: horizontal-stack
                cards:
                  - type: picture-glance
                    image: /local/MyEntities/hallway.jpeg
                    entities:
                      - light.sonoff_hallway_light
                      - light.gateway_light_34ce0088d2f7
                  - type: picture-glance
                    image: /local/MyEntities/bedroom.jpeg
                    entities:
                      - light.desk_lamp
                      - switch.bedroom_fan_light

i want do it this way because like this its look:

but if its will be without the "vertical-stack cards" its will be look like this: (no borders)

Thanks again!

Custom element doesn't exist: hui-conditional-card.

Hi,

there seems to be a small problem with the vertical-stack-in-card after upgrading to 107. The frontend throws an error "Custom element doesn't exist: hui-conditional-card. when using a "type: conditional" inside the custom:vertical-stack-in-card.

This does not happen when using the "normal" vertical-stack. The YAML for the section is fine, there is no hui-conditional-* referenced anywhere.

Not Removing Box Shadow in HA 0.81.6

Box shadow not being removed in HA 0.81.6 and also getting an error of "Uncaught TypeError: Cannot read property 'childNodes' of null".

Transparency is not the same as with other cards

I like this custom-card and I use it in my modified clear theme. I noticed that the transparency is different than other cards. Look at the example. What could cause this?

Issues with input_number

Hi, I getting this Warning :
https://MYSERVER.COM/frontend_latest/eb618cf11a4eca6918ea.chunk.js:266:14994 TypeError: null is not an object (evaluating 'this.shadowRoot.querySelector("paper-slider").offsetWidth')

The config:

      - type: custom:vertical-stack-in-card
        cards:   
          - type: markdown
            content: >
              ### Alarm Clock

          - type: entities
            entities:
              - input_boolean.alarm_clock_status
              - entity: sensor.alarm_clock_time
                name: Selcted Time
              - input_number.alarm_clock_minute
              - input_number.alarm_clock_hour

If I will remove the input_number entities , the warning will disappear

Thanks again!

vertical-stack-in-card: no columns in view possible

When I add several vertical-stack-in-card to a view, they are all sorted into one single column. If I use the "classic" vertical-stack-card, the stacks are arranged in columns, just like single cards.

SyntaxError: Unexpected keyword 'const'

In the full home assistant log i get this error:

ERROR (MainThread) [frontend.js.es5.201901211] https://mydomain.duckdns.org:8123/local/vertical-stack-in-card.js?v=v0.1.0:17:0 SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

my ui-lovelance.yaml:
  - url: /local/vertical-stack-in-card.js?v=v0.1.0
    type: js

but my implementation of the type: custom:vertical-stack-in-card works as expected.
Why does this error appear?

Add padding to allow separation between entities

tested 006 , it is now better aligned , but no way to separate one measure from the other ,
i think what is needed is to add a CSS padding option to styling , in order to make it useful .

Look at the picture en closed issue .

Problem rendering on iphone using HA app.

The custom-vertical-stack works well in Windows and on Android but I seem to have a problem rendering it on the iphome. Error says:

• n.setConfig is not a function (In ‘n.setConfig(1)’.n.setConfig’ is undefined.

Any thoughts? Thanks in advance Ynot.

Another warning, queryselector

http://ip-adress/local/lovelace/vertical-stack-in-card.js?1534500832.8876953&v=0.0.6:61:50 Uncaught TypeError: Cannot read property 'querySelector' of null

Latest Chrome is used.

Config:

    title: Security
    cards:
      - type: entities
        entities:
          - entity: input_boolean.show_security
            name: Show
            icon: mdi:security-home
      - type: conditional
        conditions:
          - entity: input_boolean.show_security
            state: "on"
        card:
          type: custom:monster-card
          show_empty: false
          card:
            type: entities
          filter:
            include:
              - entity_id: "sensor.*movement*"
                options:
                  secondary_info: last-changed
      - type: conditional
        conditions:
          - entity: input_boolean.show_security
            state: "on"
        card:
          type: custom:monster-card
          show_empty: false
          card:
            type: entities
          filter:
            include:
              - entity_id: "sensor.*lock*"
                options:
                  secondary_info: last-changed
              - entity_id: "sensor.*door*"
                options:
                  secondary_info: last-changed
                state: 'Open'
                state: 'Closed'
              - entity_id: "sensor.*window*"
                options:
                  secondary_info: last-changed
                state: 'Open'
                state: 'Closed'

Issue when using card-modder inside vertical-stack-in-card

When you try using card-modder inside of vertical-stack-in-card you get the following error. I've tried in a few different ways and without using the maps just to make sure it wasn't that causing the issue. But no matter what, if I put card-modder inside vertical-stack-in-card I get that error. I've tried clearing cache and a different browser just be sure it wasn't an issue like that.

gauge card not showing up

I'm having problems with showing gauges in the vertical-stack-in-card. They are not showing up anymore, while they did in the past. If I show the gauge card normally (not in the vertical-stack-in-card), it works fine. I don't remember when this changed.

My code is as follows.

- icon: mdi:access-point-network
  id: netwerk
  cards: 
    - type: custom:vertical-stack-in-card
      title: internet
      cards:
      - type: gauge
        title: download
        entity: sensor.speedtest_download
      - type: gauge
        title: upload
        entity: sensor.speedtest_upload
      - type: gauge
        title: ping
        entity: sensor.speedtest_ping

Any idea what is going wrong?

my config is broken (v 0.1.3)

I was on holiday, unfortunately I updated the vertical stack in card via mobile and all of my configuration are broken now. I usd the card modder for eliminate the background of the cards in the vertical stacks but it doesn"t work now.
For example:
before:

The config:

card:
  color: white
  entities:
    - cards:
        - cards:
            - card:
                color: 'rgb(255, 165, 0)'
                color_off: 'rgb(30, 144, 255)'
                color_type: icon
                entity: fan.xiaomi_miio_device
                hold_action:
                  action: more-info
                name: légtisztító
                size: 17%
                state:
                  - spin: true
                    styles:
                      card:
                        - box-shadow: 0px 0px 20px 3px var(--paper-item-icon-color)
                        - background-color: 'rgba(57,128,228,0.2)'
                    value: 'on'
                  - styles: null
                    value: 'off'
                styles:
                  card:
                    - transform: scale(0.97)
                    - font-size: 14px
                    - height: 85px
                type: 'custom:button-card'
              style:
                background-color: 'rgba(0,0,0,0.3)'
                background-size: 100% 100%
                border: 'solid 1px rgba(57,128,228,0.6)'
                border-radius: 15px
              type: 'custom:card-modder'
            - card:
                color: 'rgb(255, 165, 0)'
                color_off: 'rgb(30, 144, 255)'
                color_type: icon
                entity: switch.led
                hold_action:
                  action: more-info
                name: LED
                size: 17%
                state:
                  - styles:
                      card:
                        - box-shadow: 0px 0px 20px 3px var(--paper-item-icon-color)
                        - background-color: 'rgba(57,128,228,0.2)'
                    value: 'on'
                  - styles:
                      card: null
                    value: 'off'
                styles:
                  card:
                    - transform: scale(0.97)
                    - font-size: 14px
                    - height: 85px
                type: 'custom:button-card'
              style:
                background-color: 'rgba(0,0,0,0.3)'
                background-size: 100% 100%
                border: 'solid 1px rgba(57,128,228,0.6)'
                border-radius: 15px
              type: 'custom:card-modder'
          type: horizontal-stack
      type: 'custom:vertical-stack-in-card'
    - cards:
        - card:
            entity: input_number.favorite_fan_speed
            name: sebesség
            type: 'custom:slider-entity-row'
          style:
            background-color: 'rgba(0,0,20,0.3)'
            background-size: 100% 100%
          type: 'custom:card-modder'
      type: 'custom:vertical-stack-in-card'
  show_header_toggle: false
  type: entities
style:
  background-color: 'rgba(0,0,20,0.3)'
  background-image: url("/local/pictures/cardback.png")
  background-repeat: no-repeat
  background-size: 100% 100%
  border: 'solid 1px rgba(57,128,228,0.6)'
  border-radius: 15px
type: 'custom:card-modder'

now:

Unfortunately all cards have this kind of strange behaviour now:
before:

now:

Please help me or please send me an older js to try to solve my problem.

Error card not working

Hi.
hui-error-card has become more picky about it's interface, so errors aren't displaying correctly...

The variable config needs to be renamed origConfig here:
https://github.com/custom-cards/vertical-stack-in-card/blob/master/vertical-stack-in-card.js#L35-L39

Issues with nesting a horizontal stack

type: 'custom:vertical-stack-in-card'
title: Draußen
cards:
  - type: 'custom:mini-graph-card'
    entity: sensor.virt_temperatur_aussen
    line_color: '#eb4d54'
    name: Temperatur
  - type: horizontal-stack
    cards:
      - entity: sensor.virt_luftfeuchtigkeit_aussen
        icon: 'mdi:water-percent'
        line_color: '#3a8df7'
        name: Rel. Hum.
        type: 'custom:mini-graph-card'
      - entity: sensor.virt_absolute_luftfeuchtigkeit_aussen
        icon: 'mdi:water'
        line_color: '#3a8df7'
        name: Abs. Hum.
        type: 'custom:mini-graph-card'

It seems like its only removing the border of the first child of the horizontal-stack card

Cannot read property 'setConfig' of undefined

I'm getting the subject error when trying to use this card

My config is:

- type: 'custom:vertical-stack-in-card'
  title: My Card
  cards:
    - type: glance
      entities:
        - binary_sensor.trafo_status
    - type: entities
      entities:
        - binary_sensor.trafo_status

Broken as of 0.106

It appears the below breaking change has broken this card.

https://developers.home-assistant.io/blog/2020/02/18/106-custom-card-changes/

Any help would be good :)

Horizontal version

Could there be a horizontal version of this too?