gauge card not showing up

[Ernst79]

gauge card not showing up

[ConnorGriffin]

the ha-card element styling is the issue.

top highlighted section is a working standalone gauge card. Bottom is part of the stack.

When the element style is edited manually the card shows up.

I edited my file for a temporary fix, but I doubt this is the solution the developer is going to want to implement.

Replaced:

// line 80
element.shadowRoot.querySelector('ha-card').style.boxShadow = 'none';

With:

// line 80-84
if (element.tagName == 'HUI-GAUGE-CARD') {
    element.shadowRoot.querySelector('ha-card').setAttribute('style', '--base-unit: 50px; box-shadow: none;');
} else {
    element.shadowRoot.querySelector('ha-card').style.boxShadow = 'none';
}

[bieniu]

I have the same issue. Gauge card doesn't show and no errors in log.

- type: custom:vertical-stack-in-card
   title: 'UPS'
   cards:
     - type: entities
       show_header_toggle: false
       entities:
         - sensor.ups_status
         - sensor.ups_battery_charge
       - type: gauge
         title: 'Obciążenie'
         entity: sensor.ups_load
         severity:
           green: 0
           yellow: 40
           red: 70

[Ernst79]

Can confirm that this (temporary) solution works, after deleting the cache of my browser and hitting ctrl+F5 a few times.

[ConnorGriffin]

FYI @Ernst79: You can add a ?v=1 to your includes in ui-lovelace.yaml, and then increment that number when you make an update to force your browser to reload the file.

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

[ofekashery]

Can anyone help me understand why the base-unit becomes 0?

[ConnorGriffin]

Your commit has a typo, 'hui-gaugg-card' should be 'hui-gauge-card'.

I'll see if I can do some experimenting tonight.

[Ernst79]

I still have issues. It does show up correctly now, with the modified code, but as soon as the value of the sensor changes, it disappears.

[thomasloven]

I haven't tested it, but I would guess this also affects the light and thermostat cards, right?

The problem is that those cards rely on their width to determine the size of certain elements, and the width is checked at the moment of their creation. A bug in the light, thermostat and gauge cards that's being looked at currently.

You're creating those cards inside your own (in the setConfig function), but that that point your card doesn't quite exist yet, so anything inside it has no width.

As a workaround until the cards are fixed, you could defer the creation of the cards to a timeout.
I.e. move the config.cards.forEach(... stuff into

setConfig(config) {

  ...

  setTimeout(() => {
    config.cards.forEach(...
  }, 10);
}

10 ms of delay seems to be enough for my layout-card, while not being long enough for the user to notice.

[ofekashery]

Fixed in the new version(0.1.1)