Custom_Field cards issues

[jackshaw20]

since upgrading to latest version of HA I am no longer able to use the standard HA 'conditional' card as a custom_field card. I now get an error to say the card doesn't exist.

I now get an error where this use to work perfectly before;

[jackshaw20]

this issue only seems to give the error on certain cards, if I use the entity card it works fine again but soon as change it back to a 'Conditional' card I get the element doesn't exist. this was working fine for a long time prior to now

[dcapslock]

Check that you don't have button-card loaded twice as a resource. Also, if you have button-card loaded as a extra_module_url this is not correct.

[jackshaw20]

I have just checked my resources and it is only entered once in my resources.yaml.
The button-card works fine for everything else but is no longer working when I add custom_field card set to "type: conditional"

noticed if I add the card and refresh the card appears but then if I refresh the browser again I then get the "custom element doesn't exist: conditional" but the card isn't a custom element card its a standard HA card.

this is the full card. the 'main_image' card shows up fine. the issue is with 'z1005' if I remove the 'conditional' card and just use the entities card that shows up. I have been using 'conditional' fine prior to the update.

• type: custom:button-card
  show_state: false
  styles:
  card:
  - align-self: start
  - width: 1277px
  - height: 798px
  - background-color: rgba(255, 255, 255, 0)

  custom_fields:
  main_image:
  - position: absolute
  - width: 1277px
  - height: 798px
  - top: 0px
  - left: 0px

  z1005:
    - position: absolute
    - top: 80px
    - left: 30px
  

  custom_fields:
  main_image:
  card:
  type: custom:button-card
  entity_picture: /local/icon/floor-plans/ground.png
  show_entity_picture: true
  styles:
  card:
  - padding: 0px
  - background-color: rgba(255, 255, 255, 0.05)
  icon:
  - width: 1277px
  - height: 798px
  - top: 0px

  z1005:
  card:
  type: conditional
  conditions:
  - condition: state
  entity: binary_sensor.zone_1005
  state: 'on'
  card:
  type: entities
  entities:
  - binary_sensor.zone_1005

[dcapslock]

Good to confirm resources are set correctly. Duplicate resources can create strange issues.

I suggest still to refresh caches to be sure as you say this has happened after an upgrade. There could also be Home Assistant webpack resource chunk issues that would give rise to this sort of issue.

[jackshaw20]

thanks, I have cleared the caches and still the same. just been looking through the Web Inspector when I load my dashboard and noticed this. http://192.168.1.19:8123/unknown/node_modules/home-assistant-js-websocket/dist/connection.js

could this be related to the problem if so what would be the recommended fix?

[dcapslock]

Do you have a screenshot of the error? Perhaps check your Home Assistant URL settings in network in system.

[jackshaw20]

I have got rid of that error now looks like might have always been there as had a typo in a resource I no longer use.

Still have the issue of unable to add a ‘conditional’ card as a custom_field gives the error it doesn’t exist where it was fine previously. Tested using an entity card and it works fine.

Cleared all caches out again too and still the same

[dcapslock]

Can you post your code correctly formatted?

[jackshaw20]

I have noticed if I revert back to the code with the conditional card and click 'Refresh Resources' in the top right corner of the dashboard the card then works, but soon as I reload/refresh the browser page I then get the error to say 'Custom Element doesn't exist: 'Conditional'. but the 'Conditional' card isn't a custom element.

I thought it was a cache issue but cleared that and also tried on a different browser and get the same result. Strange as it was working fine previously.

code that use to work fine but now doesn't;

if I try like this it works fine;

[dcapslock]

If you would like review please post formatted code, not just images. Use triple backticks. Same as for community forum which has a post of how to format code in the help section.

[jackshaw20]

type: custom:button-card
show_state: false
styles:
  card:
    - align-self: start
    - width: 1277px
    - height: 798px
    - background-color: rgba(255, 255, 255, 0)
  custom_fields:
    main_image:
      - position: absolute
      - width: 1277px
      - height: 798px
      - top: 0px
      - left: 0px
    z1005:
      - position: absolute
      - top: 30px
      - left: 30px

custom_fields:
  main_image:
    card:
      type: custom:button-card
      entity_picture: /local/icon/floor-plans/ground-nobg2.png
      show_entity_picture: true
      styles:
        card:
          - padding: 0px
          - background-color: rgba(255, 255, 255, 0.05)
        icon:
          - width: 1277px
          - height: 798px
          - top: 0px
  z1005:
    card:
      type: conditional
      conditions:
        - condition: state
          entity: binary_sensor.zone_1005
          state: "on"
      card:
        type: entity
        entity: binary_sensor.zone_1005

[dcapslock]

Though I can't reproduce, I believe there is a bug in the code that was originally from custom-card-helpers. cardConfig.type should be tag. So whenever timing means that the card is not ready (could be any lazy loaded card) then it does not recover as the wait is looking for card type not the actual DOM card tag. This would also explain why it is hard to replicate.

What dashboard do you have this card on? Sections, masonry, panel?

[dcapslock]

While this gets addressed a workaround is to template the display CSS of the custom_field. display: flex is the usual for custom field in button-card.

If you are getting the issue for conditional then it is likely you would get for any lazy loaded card types.

e.g.

type: custom:button-card
show_state: false
styles:
  card:
    - align-self: start
    - width: 1277px
    - height: 798px
    - background-color: rgba(255, 255, 255, 0)
  custom_fields:
    main_image:
      - position: absolute
      - width: 1277px
      - height: 798px
      - top: 0px
      - left: 0px
    z1005:
      - position: absolute
      - top: 30px
      - left: 30px
      - display: |
          [[[
            return states['binary_sensor.zone_1005'].state == "on" ? "flex" : "none"; 
          ]]]
custom_fields:
  main_image:
    card:
      type: custom:button-card
      entity_picture: /local/icon/floor-plans/ground-nobg2.png
      show_entity_picture: true
      styles:
        card:
          - padding: 0px
          - background-color: rgba(255, 255, 255, 0.05)
        icon:
          - width: 1277px
          - height: 798px
          - top: 0px
  z1005:
    card:
      type: entity
      entity: binary_sensor.zone_1005