Button card and Mini graph card stretching

[Luth1ng]

Hello there, hope someone could help me.

I can’t figure out to stretch my mini-graph-card inside a button-card. There is a space between bottom of the card and the graph.
The only thing which is working is increasing the height of the row with grid-template-rows, but the aspect_ratio 1/1 isn’t kept.

Here’s my code :

  - type: custom:button-card
    aspect_ratio: 1/1
    icon: mdi:chair-rolling
    entity: sensor.ble_temperature_thermometre1
    name: Bureau
    custom_fields:
      graph:
        card:
          type: custom:mini-graph-card
          entities:
            - sensor.ble_temperature_thermometre1
          show:
            icon: false
            name: false
            state: false
          line_width: 5
      hu: |
        [[[
          return `<ha-icon
          icon="mdi:water-percent:"
          style="width:20px;color: skyblue;">
          </ha-icon><span style="color: var(--text-color-sensor);">${states['sensor.ble_humidity_thermometre1'].state}%</span>`
        ]]]
      temp: |
        [[[
          return `<ha-icon
          icon="mdi:thermometer:"
          style="width:20px;color:var(--accent-color);">
          </ha-icon><span>${entity.state}°C</span>`
        ]]]
    styles:
      custom_fields:
        graph:
          - overflow: unset
      card:
        - overflow: unset
      grid:
        - grid-template-areas: '"n i" "temp hu" "graph graph"'
        - grid-template-columns: 50% 50%
        - grid-template-rows: 1fr 1fr 1fr
        - overflow: unset

      name:
        - font-size: 16px
        - color: white
      state:
        - font-size: 10px
        - color: white

And with setting

    styles:
      grid:
        - grid-template-rows: 30% 30% 100%

The card is higher than others in my horizontal stack…

Many thanks for your help

[Luth1ng]

Is there a way to make this working ?

[Luth1ng]

May anyone help me please

[Luth1ng]

No one ?

[Luth1ng]

For those are asking how to fix that, you’ll have to play with :

• styles card height
• mini-graph-card height
• if you’re using grid, the grid space is tricky. Use very low % values.
• z-index to let the graph displays other things

Example:

type: custom:button-card
entity: sensor.myentity
styles:
  card:
    - padding: 0%
    - margin: 0%
    - height: 100px
  grid:
    - grid-template-areas: '"i n" "i hits" "graph graph"'
    - grid-template-columns: 20% 1fr
    - grid-template-rows: 33% 33% 3%
  name:
    - z-index: 1
  icon:
    - z-index: 1
  custom_fields:
    graph:
      - z-index: 0
custom_fields:
  graph:
    card:
      type: custom:mini-graph-card
      height: 50

[Timmiej93 (Tim)]

Quite a bit too late, I know, but the accepted answer is not correct. It may work, but it’s not the proper solution. The issue is that the custom button card has bottom padding.

Example I was working on. This has the same gap at the bottom.

With the element selected in the inspector, you can see the green area, which is padding.

Again, with the element selected in the inspector, we can see there’s almost 5 pixels of bottom padding.

To fix this, simply add - padding-bottom: 0 to your card styling. You could do the same for padding-top if you’d want to.

Side by side. Original on the left, result on the right.

Now if only I knew how to remove that border around the graph…

[LiQuid_cOOled]

@Luth1ng

Now if only I knew how to remove that border around the graph…

You can remove the border with card-mod…

type: custom:mini-graph-card
          entities:
            - sensor.ble_temperature_thermometre1
          show:
            icon: false
            name: false
            state: false
          line_width: 5
          card_mod:
            style: |
             ha-card {
               border: none;
                 }