Height of cards trick

Share your Projects! Dashboards & Frontend
1

Hi there all,
I just work on my first Lovelace interface for a tablet.
I make 3 colons and there I put together my cards… in general I use custom:layout-card.

What I want to ask… is there some trick in order to give the height of every card please ?
Maybe a card that I can use in order to set the size
and inside that card use the card that have not possibility to size.

Thanks a ll
Denis

2

You can use card-mod to set the card height.

1 Like
3

Thanks for the answer Tom, but I try card-mod and is not work on the
In fact I use the layout-card and there is a note in the card site:

Note that some cards ( conditional , entity-filter , horizontal-stack and vertical-stack as well as some custom cards, like layout-card , auto-entities and state-switch among others) do not have a ha-card element, and card-mod will thus not work for those. There is a workaround, though

I must try other trick :frowning:
Thanks again
Denis

4

Strange. The layout card instructions specifically mention it when using grid layout.

Hint: This may look better if you also have card-mod and set the card heights to 100 % .

5

Now I just try this sample:

And it seems to work but not so well :frowning:
Here is a test:

image
image1956×1067 185 KB

There is some more space between cards and there is a type of shadow.
Here is the code:

  - title: tablet2
    theme: reeder_dark
    icon: mdi:tablet-dashboard
    background: 'center / cover no-repeat url("/local/background.jpeg") fixed'
    type: custom:layout-card
    column_num: 3
    layout: horizontal
    column_width: 424px
    cards:
  ### col 1
      - type: custom:layout-card 
        layout: vertical
        column_width: 100%
        cards:
          - type: custom:layout-card
            layout: grid
            gridrows: 250px ### set height
            cards:
              - type: entities
                title: col1
                entities: 
                  - switch.luce_garage
          - type: custom:layout-card
            layout: grid
            gridrows: 240px ### set height
            cards:
              - type: custom:mini-graph-card
                name: BATT/CASA
                icon: mdi:server
                hours_to_show: 2
                points_per_hour: 5
                show:
                  fill: false
                  labels: true
                  points: true
                  legend: true 
                entities:
                  - entity: sensor.powerwall_battery_now
                    name: BATT
                  - entity: sensor.house_now
                    name: CASA
  ### col 2
      - type: custom:layout-card 
        layout: vertical
        cards:
        - type: entities
          title: col2
          entities: 
            - switch.luce_garage
  ### col 3
      - type: custom:layout-card 
        layout: vertical
        cards:
        - type: entities
          title: col3
          entities: 
            - switch.luce_garage
#

I still must find a perfect solution :slight_smile:
Denis

6

Hi, did you find the solution? I have same problem. I am using entity-filter or auto-entities for entities with state “ON” and every time, when entity change his state, the styling/formating of card disappears and of course with card height.
For example, I am using this styling of card:

card:
  type: entities
  card_mod: null
  style: |
    ha-card {
    color: white;
    margin: -1px 0px !important;
    height: 386px !important;
    --card-mod-icon-color: lightblue;
    }
    #states > * {
          margin: -10px 0px !important;
    }
2 Likes