custom-cards / circle-sensor-card

A custom component for displaying sensor values as cards or elements
Apache License 2.0
174 stars 23 forks source link

Does not render. #33

Open jofotoo opened 2 years ago

jofotoo commented 2 years ago

HA 2021.11 Config as follows:

type: custom:circle-sensor-card
entity: sensor.sump_pump_humidity
name: Humidity

Repeated messages in the log:

2021-11-06 12:40:31 ERROR (MainThread) [frontend.js.latest.202111030] https://unpkg.com/@polymer/polymer@3.4.1/lib/utils/async.js?module:43:27 Uncaught TypeError: Cannot read properties of undefined (reading 'height')

2021-11-06 12:40:58 ERROR (MainThread) [frontend.js.latest.202111030] https://hass.<my-domain>.com/hacsfiles/circle-sensor-card/circle-sensor-card.js?hacstag=141952963122:30:36 Uncaught TypeError: Cannot read properties of undefined (reading 'height')

Let me know if you need further details :)

Kh3nsu commented 2 years ago

+1

GrzesiuS commented 2 years ago

+1

kbrohkahn commented 2 years ago

I noticed that these lines are in the file around line 30:

.container {
            position: relative;
            height: ${config.style.height || '100%'};
            width: ${config.style.width};
            top: ${config.style.top};
            left: ${config.style.left};
            display: flex;
            flex-direction: column;
          }

Which is requiring the style: map to be set in the config. I'm not sure why this .container class needed to be included, but the error occurs when style: is not set, breaking the entire file and rendering the card as empty. Try adding this to your config:

style:
  width: 100%
  height: 100%
  left: 0
  top: 0

For example:

type: custom:circle-sensor-card
entity: sensor.config
style:
  width: 100%
  height: 100%
  left: 0
  top: 0