Grid card shows empty first card

[Mariusthvdb (Marius)]

already wrote up an issue, , but maybe anyone here can help/check?

using a type: grid card to show conditional button cards, all squares (using aspect_ratio: 1/1) , it always shows the first (left) position as an empty placeholder without a card.

other than that, the grid is filled perfectly, and depending on the conditions for the individual cards, fills as should. Also adding new horizontal stacks on more than 4 cards works beautifully.

4 cards:

for more images, please click the issue, don’t want to cross post too much

config:

- type: grid
    title: Alerts
    columns: 4
    cards:
      !include /config/lovelace/buttons/buttons_alerts.yaml

where the include file has entries like below for all possible alerts

- type: conditional
  conditions:
    - entity: binary_sensor.doors
      state: 'on'
  card: !include /config/lovelace/includes/include_button_sensor_doors.yaml

- type: conditional
  conditions:
    - entity: binary_sensor.garage_door
      state: 'on'
  card: !include /config/lovelace/includes/include_button_garage_door.yaml

- type: conditional
  conditions:
    - entity: binary_sensor.github_repo_has_update
      state: 'on'
  card: !include /config/lovelace/includes/include_button_github_repo_alert.yaml

etc
etc

hope this is not caused by the conditional effect we see in other places too, always leaving space before the cards, even if they are not displayed.
Thanks for having a look!

[petro]

@Mariusthvdb

    cards:
      !include /config/lovelace/buttons/buttons_alerts.yaml

That looks suspect. Put it in 1 line.

[Mariusthvdb (Marius)]

thanks, but no that doesn’t change it:

    - type: grid
#      title: Alerts
      columns: 4
      cards: !include /config/lovelace/buttons/buttons_alerts_swipe.yaml

shows exactly the same. The include simply replaces the content of it, so that should be alright, as it is a list of dashed conditionals.

[petro]

Can you try it without the conditional?

just use

- !include ...

[rccoleman (Rob Coleman)]

I had a suspiciously similar issue with the layout card: Conditional card creates a blank space and sometimes rearranges cards · Issue #86 · thomasloven/lovelace-layout-card · GitHub. I gave up on it and just used a horizontal stack, which worked fine.

[Mariusthvdb (Marius)]

that is in fact what I am doing now isn’t it?

other than that each card in that include has its own conditional of course.

Somehow there’s code in HA that creates an empty placeholder on the first conditional. there are other examples.

Using a horizontal stack with conditional cards does it too, although you have to look carefully. I did a post on that a longg while ago and it was never solved, or even looked at maybe…

would this trouble the grid card too?:When using "type: conditional" there is a blank space · Issue #5 · thomasloven/lovelace-layout-card · GitHub

[petro]

@Mariusthvdb

other than that each card in that include has its own conditional of course.

That’s what i’m asking you to remove to see what happens.

[Mariusthvdb (Marius)]

ok, its what I explained in the issue, if I even have 1 unconditional card at the top, all is well:

#- type: conditional
#  conditions:
#    - entity: binary_sensor.alarm_triggered
#      state: 'on'
#  card:
- !include /config/lovelace/includes/include_button_alarm_disarm.yaml

- type: conditional
  conditions:
    - entity: input_boolean.flood_alert
      state: 'on'
  card: !include /config/lovelace/includes/include_button_flood_alert.yaml

etc
etc

the meteoalarm is the 20th or so in the list.

[petro]

Seems like a bug then.

[Mariusthvdb (Marius)]

yah, I fear, hence the issue, thanks for having a look!