Child cards with animations (e.g., analog clocks) sometimes fail to render inside button-card custom_fields

[hzonz]

Hello,

I’ve encountered a recurring rendering issue when embedding animated custom cards (such as analog clock cards) inside button-card using custom_fields.

Problem

When placing a custom analog clock card (e.g., gcclock-simple, or other clock-style custom cards) inside button-card as a custom_field, the child card sometimes fails to render correctly on initial load.

The card only appears after refreshing the dashboard a few times.

This issue is not specific to one clock card, as I tested three different analog clock cards, and all show the same behavior.

Expected Behavior

Child cards should render reliably inside button-card custom_fields without requiring multiple dashboard reloads.

Steps to Reproduce

Install any analog clock custom card (e.g., gcclock-simple).

Place it inside a button-card custom_field.

Reload the dashboard multiple times.

Observe that the child card sometimes does not render at all.

Example YAML

type: custom:button-card
custom_fields:
  a:
    card:
      type: custom:gcclock-simple
      showCardBackground: false
      smoothMovement: false

Notes

Directly using the clock card outside of button-card works fine.

The issue seems to be related to how button-card initializes child custom cards inside custom_fields (possibly before the container has a proper size).

Adding triggers_update (e.g., with sensor.time) sometimes helps, but it feels like a workaround instead of a fix.

Environment

Home Assistant version: [2025.9.0]

Frontend version: [20250903.2]

Browser: [Edge 139.0.3405.125]

Device: [Windows 11 Desktop]

button-card version: [latest v4.3.0]

Could this be improved so that button-card ensures child custom cards are initialized properly?

Thank you!

[dcapslock]

Taking a look. At first glance I am not replicating. This is on both MacOS/Chrome and Windows11/Edge.

Generally, there would be no reasons for cards not to work with button-card in a custom field. Cards are initialised in the correct manner for loading cards dynamically.

Taking a look at gcclock-simple, it is relying on a single call to requestAnimationFrame as it's method of continual update. I can't understand what is exactly failing, but it must be to do with requestAnimationFrame not working this first time, meaning that there will be no further updates. Since the card uses Lit framework, but with no Lit states or properties there will be no other update mechanism. Usually a custom card uses hass as a property/state which will always be updated by Home Assistant at the correct time, meaning the card will update unless it choses not to. Without such a mechanism with gcclock-simple, there is nothing button-card can do to rectify this issue. [e.g. calling requestUpdate() in the card will do nothing, nor will firing ll-rebuild lovelace event for the card as does not have hass as a state.]

Now Home Assistant has an analog clock, it should be the preferred clock. From what I can see it should work fine with button-card as it adheres to what I mention above, as you would expect with any standard card. The only feature difference of the two cards is that the Home Assistant version does not have a smooth mode.

[hzonz]

Now Home Assistant has an analog clock, it should be the preferred clock. From what I can see it should work fine with button-card as it adheres to what I mention above, as you would expect with any standard card. The only feature difference of the two cards is that the Home Assistant version does not have a smooth mode.

Hello,

I’ve tested the scenario further using the official Home Assistant clock card (analog style) instead of gcclock-simple, embedded inside button-card custom_fields.

The issue persists:

The clock card sometimes fails to render on initial dashboard load.

I still need to refresh the dashboard multiple times for it to appear.

Here is the full YAML example I used:

type: custom:button-card
show_icon: false
show_state: false
show_name: false
styles:
  grid:
    - grid-template-areas: |
        "a b"
        "a c"
        "a d"
        "a e"
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content min-content min-content
  card:
    - padding: 10px
custom_fields:
  a:
    card:
      type: clock
      clock_style: analog
      clock_size: medium
      show_seconds: true
      no_background: true
      border: false
      ticks: hour
  b:
    card:
      type: custom:button-card
      entity: sensor.time
      show_icon: false
      show_name: false
      show_state: true
      styles:
        card:
          - background: transparent
          - border: none
          - box-shadow: none
        state:
          - font-size: 30px
          - letter-spacing: 3px
          - font-weight: bold
  c:
    card:
      type: custom:button-card
      entity: sensor.nong_li
      show_icon: false
      show_state: false
      name: |
        [[[
          const now = new Date();
          const month = now.getMonth() + 1;
          const day = now.getDate();
          const week = states['sensor.nong_li']?.attributes?.lunar?.星期 || "";
          return `${month}月${day}号 ${week}`;
        ]]]
      styles:
        card:
          - background: transparent
          - border: none
          - box-shadow: none
        name:
          - font-size: 12px
          - letter-spacing: 2px
          - font-weight: bold
      tap_action: { action: none }
      hold_action: { action: none }
      double_tap_action: { action: none }
  d:
    card:
      type: custom:button-card
      entity: sensor.nong_li
      show_icon: false
      show_state: false
      name: |
        [[[
          const nianganzhi = states['sensor.nong_li']?.attributes?.lunar?.年干支 || "";
          const state = states['sensor.nong_li']?.state || "";
          return `${nianganzhi} ${state}`;
        ]]]
      styles:
        card:
          - background: transparent
          - border: none
          - box-shadow: none
        name:
          - font-size: 12px
          - letter-spacing: 2px
          - font-weight: bold
  e:
    card:
      type: custom:button-card
      entity: sensor.nong_li
      show_icon: false
      show_state: false
      name: |
        [[[
          return states['sensor.nong_li']?.attributes?.lunar?.节气?.节气差 || "";
        ]]]
      styles:
        card:
          - background: transparent
          - border: none
          - box-shadow: none
        name:
          - font-size: 12px
          - letter-spacing: 2px
          - font-weight: bold
          - background-color: coral
          - border-radius: 10px
          - padding: 6px
          - margin: 5px
      tap_action: { action: none }
      hold_action: { action: none }
      double_tap_action: { action: none }

[dcapslock]

Hi, thanks for the update. I have tested your config and still can't replicate. This does not mean there is no issue for you, just that it will be hard to know whether it is button-card or something else.

I suspect something else may be interfering.

1. Do you use card-mod? If so please check out this comment (a comment of mine), and make sure that two versions of card-mod are not running.
2. Are you using Minimalist UI theme? It can load button-card which may confict with what you have installed from HACS.

If not either of the above, then please note all custom elements you are using so I can check for any interactions. A copy of your console after page refresh is a good start here. Thanks

[hzonz]

2. Are you using Minimalist UI theme? It can load button-card which may confict with what you have installed from HACS.

Hi, I realized that I was using the Minimalist UI Lovelace theme, which caused multiple old versions of some custom cards to exist in my setup and may have interfered with button-card behavior. I have now removed the Minimalist UI theme and restarted Home Assistant, and the issue is resolved. Thank you for your guidance!

[dcapslock]

Good to hear. Thanks for the update. Closing issue now.