Custom Styles Styling options don't seem to render until a page update happens

[andrewgraham1]

Describe the bug
I have buttons with custom styling to show how many items are in my todo lists and shopping lists that look like this:

${card.querySelector('.bubble-state').innerText = hass.states['todo.shopping_list'].state + ' Items'}

Which should produce this:

However on mobile and desktop when my default page is opened the styling is not applied and it defaults to showing just the entity state, like this:

The styling doesn't seem to be applied until a render change happens on the dashboard page, (such as turning my lights off and on so the background changes)

To Reproduce
Steps to reproduce the behavior:

1. Create a bubble button with some custom styling to change how the entity state is displayed.
2. Observe on dashboard load, styling is not applied
3. Observe styling is only applied once a render update happens

Expected behavior
Whenever dashboard is loaded, stylings should render.

Informations (please complete the following information):

• OS: [Android/windows]
• Browser [firefox/android app]
• Bubble Card version [2.0.2]
• Home Assistant version [2024.4.4]

By the way, thank you for your work on this, it's an amazing addition to home assistant and the sub-buttons were just what I was looking for when you happened to release 2.0, spectacular work

Thank you! 🍻

[Clooos]

Hi and thank you for the feedback! I haven't tried this case a lot so it's possible that it is not working as intended, I will have to take a look at this.

[Clooos]

Hi again!

I've tried and I found some kind of hack to makes it working!

Instead of show_state: true just toggle show_attribute: true without any attribute, it's working perfectly for me 🙂

I will add a note about that in the documentation.