Integration with other cards

[ghost]

Unsure if this error is related to the vertical-card-stack 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 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

[ghost]

Posted to the vertical-stack repo also: https://github.com/custom-cards/vertical-stack-in-card/issues/23

[ofekashery]

I checked it, it's a problem with this card. You have to build the ha-card already in setConfig, and then change it when the data arrives. It will also solve the problem at first appears "Custom element doesn't exist: mini-graph-card" for a few seconds:

[kalkih]

You can't really expect custom cards to play nice with each other, however I've made some adjustments in https://github.com/kalkih/mini-graph-card/commit/3d48bb5668158fecdd05b3255cced1a2a2b985f0 which should solve some of the issues with using this card together with vertical-stack-in-card. There are still issues when nesting this card in a horizontal-stack inside a vertical-stack-in-card.

I checked it, it's a problem with this card. You have to build the ha-card already in setConfig, and then change it when the data arrives. It will also solve the problem at first appears "Custom element doesn't exist: mini-graph-card" for a few seconds:

To claim that the problem lies in this card is a bit of a stretch. You'll see some of the same compatibility issues with custom cards like the button-card. I don't know why I would start building the card in the setConfig function, that's not the intended use of the function..

[kalkih]

You can now use the official Sensor Card if you are having this issues like this. It should integrate and work better with custom cards.