Conditional card leaving space in GUI

sparkydave · January 23, 2019, 8:30am

Using similar code to what I posted above? I’m still using that code but with all the id:'s removed and the ‘-’ moved to in front of the ‘type’.

current lovelace code:

  - type: conditional
    card:
      entity: sensor.recycling_bin_tomorrow
      image: /local/images/recycling_bin_tomorrow.png
      show_name: false
      show_state: false
      type: picture-entity
    conditions:
      - entity: sensor.recycling_bin_tomorrow
        state: 'True'


  - type: conditional
    card:
      entity: sensor.recycling_bin_today
      image: /local/images/recycling_bin_today.png
      show_name: false
      show_state: false
      type: picture-entity
    conditions:
      - entity: sensor.recycling_bin_today
        state: 'True'


  - type: conditional
    card:
      entity: sensor.green_waste_bin_tomorrow
      image: /local/images/green_waste_bin_tomorrow.png
      show_name: false
      show_state: false
      type: picture-entity
    conditions:
      - entity: sensor.green_waste_bin_tomorrow
        state: 'True'



  - type: conditional
    card:
      entity: sensor.green_waste_bin_today
      image: /local/images/green_waste_bin_today.png
      show_name: false
      show_state: false
      type: picture-entity
    conditions:
      - entity: sensor.green_waste_bin_today
        state: 'True'

DavidFW1960 · January 23, 2019, 8:40am

      - type: conditional
        conditions:
          - entity: sensor.recycling_bin_today
            state: "True"
        card:
          type: picture-entity
          entity: sensor.recycling_bin_today
          show_name: false
          show_state: false
          image: /local/images/recycling_bin_tomorrow.png

I created the sensors. (they work)

It just won’t save. I’m on 0.86.0b3

error: YAML Error: TypeError: Cannot read property ‘startsWith’ of undefined

sparkydave · January 23, 2019, 8:44am

hmmm. Mine is all mixed up from the stupid auto-lovelace migration debacle whereas your code is how mine originally was, and should work… You have the correct sensor set up for the condition? I’m using Google calendar sensors to get that but you can use anything you want.

EDIT: just saw you last bit… I wonder what the startsWith thing is all about?

DavidFW1960 · January 23, 2019, 8:49am

Package for sensors:

# Download the Bin icons from my github
# and save them under /www/icons/recyclinggreenbin/ in your configuration directory.
# Show Bins Sensors

sensor:
  - platform: template
    sensors:
      recycling_bin_today:
        entity_id: sensor.date
        friendly_name: "Recycling Bin Today"
        value_template: "{{ ((as_timestamp(now()) - as_timestamp('2019-01-22 00:00:00'))) / 86400 |int % 14 < 1 }}"
        entity_picture_template: >-
          {{ '/local/icons/recyclinggreenbin/recycling_bin_today.png'}}
      recycling_bin_tomorrow:
        entity_id: sensor.date
        friendly_name: "Recycling Bin Tomorrow"
        value_template: "{{ ((as_timestamp(now()) - as_timestamp('2019-01-21 00:00:00'))) / 86400 |int % 14 < 1 }}"
        entity_picture_template: >-
          {{ '/local/icons/recyclinggreenbin/recycling_bin_tomorrow.png'}}
      green_bin_today:
        entity_id: sensor.date
        friendly_name: "Green Bin Today"
        value_template: "{{ ((as_timestamp(now()) - as_timestamp('2019-01-29 00:00:00'))) / 86400 |int % 14 < 1 }}"
        entity_picture_template: >-
          {{ '/local/icons/recyclinggreenbin/green_waste_bin_today.png'}}
      green_bin_tomorrow:
        entity_id: sensor.date
        friendly_name: "Green Bin Tomorrow"
        value_template: "{{ ((as_timestamp(now()) - as_timestamp('2019-01-28 00:00:00'))) / 86400 |int % 14 < 1 }}"
        entity_picture_template: >-
          {{ '/local/icons/recyclinggreenbin/green_waste_bin_tomorrow.png'}}

DavidFW1960 · January 23, 2019, 10:34pm

Well I worked it out - it was “True” and should be ‘True’
I wonder if that’s a 0.86 thing?

sparkydave · January 23, 2019, 11:39pm

not sure, but now I look back at my code and I only used the single quote marks

DavidFW1960 · January 24, 2019, 12:27am

Yeah I meant I wonder if the double quotes became invalid in 0.86…

sparkydave · January 24, 2019, 12:31am

I don’t know, I’ve only ever used single quotes. Strange that it fails given that the docs for this card show double quotes though…

sparkydave · January 30, 2019, 11:50pm

I found the other images on my work PC, so for completeness in the thread here they are.
rubbish_bin greenwaste_bin recycling_bin

DavidFW1960 · January 30, 2019, 11:56pm

I used the images you sent with the sensors I created and an automation for a reminder as well. The conditional card works fine for me (I am using it in a stack) and I am not getting any space left at all…

jusdwy · January 30, 2019, 11:59pm

What kind of stack? Do you just have the one conditional? I find that one conditional in a stack leaves a few pixels. But multiple conditionals can take whole columns even when in their not state. There’s an open ticket already for it (actually several).

DavidFW1960 · January 31, 2019, 12:00am

Vertical Stack and I have 4 conditionals (only 1 of which can ever be true)

sparkydave · January 31, 2019, 12:18am

I’m guessing its similar to my conditionals as posted above, I just need to sort out the stack side of things

DavidFW1960 · January 31, 2019, 12:23am

I posted my package above (edited now but only to reorder and add automations. I can post my lovelace code but it probably won’t really help that much…

  - title: Lights & Switches
    icon: mdi:power
    cards:
      - type: 'custom:compact-custom-header'
      - type: vertical-stack
        cards:
          - type: entities
            title: Security & Home
            show_header_toggle: false
            entities:
              - input_boolean.alarmgaragedoor
              - switch.sonoff51083
              - switch.sonoff63719
          - type: horizontal-stack
            cards:
              - type: entity-button
                entity: switch.sonoff51083
                tap_action:
                  action: call-service
                  service: switch.turn_on
                  service_data: 
                    entity_id: switch.sonoff51083
              - type: entity-button
                entity: switch.sonoff63719
                tap_action:
                  action: call-service
                  service: switch.turn_on
                  service_data:
                    entity_id: switch.sonoff63719
              - type: custom:button-card
                entity: input_boolean.alarmgaragedoor
                icon: mdi:security
                color_type: icon
                color: rgb(251, 210, 41)
                color_off: rgb(54, 95, 140)
                name: Exit-Enter
                show_state: false
                action: service
                service: 
                  domain: input_boolean
                  action: toggle
                  data:
                    entity_id: input_boolean.alarmgaragedoor
          - type: conditional
            conditions:
              - entity: sensor.recycling_bin_today
                state: 'True'
            card:
              type: picture-entity
              entity: sensor.recycling_bin_today
              show_name: false
              show_state: false
              image: /local/icons/recyclinggreenbin/recycling_bin_today.png
          - type: conditional
            conditions:
              - entity: sensor.recycling_bin_tomorrow
                state: 'True'
            card:
              type: picture-entity
              entity: sensor.recycling_bin_tomorrow
              show_name: false
              show_state: false
              image: /local/icons/recyclinggreenbin/recycling_bin_tomorrow.png
          - type: conditional
            conditions:
              - entity: sensor.green_bin_today
                state: 'True'
            card:
              type: picture-entity
              entity: sensor.green_bin_today
              show_name: false
              show_state: false
              image: /local/icons/recyclinggreenbin/green_waste_bin_today.png
          - type: conditional
            conditions:
              - entity: sensor.green_bin_tomorrow
                state: 'True'
            card:
              type: picture-entity
              entity: sensor.green_bin_tomorrow
              show_name: false
              show_state: false
              image: /local/icons/recyclinggreenbin/green_waste_bin_tomorrow.png
          - type: entities

etc

virgilm · September 5, 2020, 7:31am

Did anybody find a solution to this problem? I am getting an empty space for every card I am trying to hide via a conditional in a horizontal stack. The card is not showing, but there is an empty space instead. I would expect the hard to be fully hidden.

kajmaj · September 5, 2020, 7:42am

The easiest way is to fill the empty space with another card.
Another way is to have “dynamic” width of cards - actually I would be interested in this solution as well.

sparkydave · September 5, 2020, 9:48pm

For me the issue only happens in a browser window, not in the Android app, so I just deal with it… not a solution but I gave up trying to find a solution because it seemed there wasn’t one

virgilm · September 6, 2020, 12:28am

Thanks @sparkydave! Yeah, same here, it happens only for specific sizes of the window (mine is a horizontal). Is there a bug ID for this, it seems this issue has been around for almost 2 years?

Three · October 27, 2020, 10:12pm

I am having same blank issue around filter entity cards in chrome on deskop as well android app is fine. Looks pretty terrible.

sparkydave · October 27, 2020, 11:27pm

There doesn’t seem to be any way of fixing it. At least not that I have found