Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cant change the size of the card #23

Open
bananflugan opened this issue Sep 27, 2020 · 4 comments
Open

Cant change the size of the card #23

bananflugan opened this issue Sep 27, 2020 · 4 comments
Labels
help wanted Extra attention is needed

Comments

@bananflugan
Copy link

bananflugan commented Sep 27, 2020

Hi,

I am having issues changing the size of this great custom card.

No matter what i put under the style section nothing is happening to the card, it stays very big.
The config i currently have in my ui config is the following:

type: custom:circle-sensor-card
        name: Humidity 1st Floor
        entity: sensor.humidity_3
        min: 0
        max: 100
        gradient: true
        stroke_width: 7
        font_style:
          color: black
          font-size: 1.5em
        style:
          width: 45px
          hight: 45px

Best regards
bananflugan

@marktillo
Copy link

You’ve spelt height wrong also you may have to use style:
Ha-card{
width: 50px !important;
Height:50px !important;
}

@a-bianucci
Copy link

I have the same issue

type: 'custom:circle-sensor-card'
entity: sensor.temperature_measurement
name: Living Room Temp
stroke_width: 10
gradient: true
units: F
fill: 'rgba(99,94,93,.95)'
font_style:
  color: white
  font-size: 2em
  font-family: Avantgarde
color_stops:
  '65': '#639BD5'
  '70': '#33931B'
  '75': '#BD371C'
style:
  width: 25px
  height: 25px

@bananflugan
Copy link
Author

@marktillo thank you for spotting my spelling error! 👍

After messing about with this for quite a while i have managed to solve it, with another custom mod.

I first tried with this, which did not work:

      - type: custom:circle-sensor-card
        name: Humidity 1st Floor
        entity: sensor.humidity_3
        min: 0
        max: 100
        gradient: true
        stroke_width: 10
        font_style:
          color: black
          font-size: 1.0em
        style: |
          ha-card {
            width: 70px !important;
            height: 50px !important;
          }

What i had to do was to use a mod called card-mod, you can find it here: https://github.com/thomasloven/lovelace-card-mod

My current code that is working:

      - type: custom:mod-card
        style: |
          ha-card {
            width: 350px !important;
            height: 200px !important;
          }
        card:
          type: horizontal-stack
          cards:
          - type: custom:circle-sensor-card
            name: Humidity 1st Floor
            entity: sensor.humidity_3
            min: 0
            max: 100
            gradient: true
            stroke_width: 10
            font_style:
              color: black
              font-size: 1.0em
          - type: custom:circle-sensor-card
            name: Humidity 2st Floor
            entity: sensor.humidity_6
            min: 0
            max: 100
            gradient: true
            stroke_width: 10
            font_style:
              color: black
              font-size: 1.0em

Hope this helps!

@a-bianucci
Copy link

That did... Thank you.

@iantrich iantrich added the help wanted Extra attention is needed label Aug 12, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

4 participants