search

custom-cards / dual-gauge-card

Dual gauge custom card for Lovelace in Home Assistant
MIT License
192 stars 43 forks source link

Card does not scale properly #57

Open tallen-harper opened 2 years ago

tallen-harper commented 2 years ago

When nested in a horizontal stack in particular, the gauge does not scale correctly taking up the full horizontal width of the outer card instead of scaling to fit the inner card:

Screen Shot 2022-05-30 at 10 50 05 am
offbyone commented 1 year ago

Urk. Yep, I've seen this too; I'm using it in a grid and the same problem:

image
trentjw commented 1 year ago

same issue with me as well

igorsantos07 commented 3 months ago

This could be partially mitigated if you use viewport units together with card_mod:

card_mod:
  style: |
    .gauge-dual-card {
      --gauge-card-width: 14vw
    }

This could be easily implemented in the card by checking if cardwidth is a number - if so, use as pixels, otherwise, use raw (expecting the unit to come after it). A regex could be used to further validate this: /^\d+\w{1,4}$/.

It's still not the best result, as it gets out of proportion and text may get way too small, but at least it's not unreadable as in your screenshot (and my dashboard haha).