Span card to fill container?

Configuration Frontend
1

Any idea how I can make this compass-card card to fill the container to match the graph next to it?

image

type: horizontal-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:compass-card
        indicator_sensors:
          - sensor: sensor.weather_station_wind_direction
        value_sensors:
          - sensor: sensor.weather_station_friendly_name_wind_speed_km_h
        compass:
          north:
            show: true
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.weather_station_wind_direction
    name: Wind Direction
    show:
      extrema: true
      average: true
      graph: true
      labels: true
    hour24: false
    hours_to_show: 24

Thanks!

2

As long as you have card_mod installed you can set the card height to 100%

Like this…

image
image948×566 36.6 KB

type: horizontal-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:compass-card
        indicator_sensors:
          - sensor: sensor.weather_station_wind_direction
        value_sensors:
          - sensor: sensor.weather_station_friendly_name_wind_speed_km_h
        compass:
          north:
            show: true
        card_mod:
          style: |
            ha-card {
             height: 100%
               }
             
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.weather_station_wind_direction
    name: Wind Direction
    show:
      extrema: true
      average: true
      graph: true
      labels: true
    hour24: false
    hours_to_show: 24
3

Thanks, also is there a way to center the compass in the card too? Look weird.

Cheers

4

This works better.

type: horizontal-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:compass-card
        indicator_sensors:
          - sensor: sensor.weather_station_wind_direction
        value_sensors:
          - sensor: sensor.weather_station_friendly_name_wind_speed_km_h
        compass:
          north:
            show: true
        card_mod:
          style: |
            .type-custom-compass-card {
                  padding: 40px;
                         }

             
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.weather_station_wind_direction
    name: Wind Direction
    show:
      extrema: true
      average: true
      graph: true
      labels: true
    hour24: false
    hours_to_show: 24
5

Thats it. Bang on thank you very much!

6

Just one thing, When I integrate into my main dashboard, the compass becomes quite small. Any ideas on this one?

image
image712×546 68.2 KB

7

Can you post the code with the two other cards in the main card? The compass card uses a lot of padding so we will need to adjust to the card’s surroundings.

Code for these…

image
image492×656 87.4 KB

I’m not getting the same effect.

image
image950×806 46.8 KB