Clooos / Bubble-Card

Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.
MIT License
1.45k stars 39 forks source link

Strange error in horizontal button card #452

Closed krzysiek2788 closed 2 months ago

krzysiek2788 commented 2 months ago

Describe the bug On my Tablet dashboard there seams to be an issue with Horizontal Button card it isn't loading only showing error image When enter edit mode error is still there image

After I edit and do not change anything and save card is showing, but after full refresh again error is showed. Error showed on Tablet and Edge in Windows 10

To Reproduce Don't know after update it happend. Tried to remove and recreate card but error is still there. In the other hand in my mobile dashboard all is working fine on Mobile phone and Desktop

Expected behavior Show horizontal Button Card. After edit without changes and save: image

Screenshots image

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Code is nothing sepcial no Styling look below type: custom:bubble-card card_type: horizontal-buttons-stack 1_link: '#heating' 1_name: Ogrzewanie 1_icon: mdi:heat-wave 2_link: '#electricy' 2_name: Prąd 2_icon: mdi:transmission-tower 3_link: '#shopping' 3_name: Zakupy 3_icon: mdi:shopping-outline 4_link: '#media' 4_name: Rozrywka 4_icon: mdi:movie-open-settings 5_link: '#lights_house' 5_name: Dom 5_icon: mdi:ceiling-light-multiple-outline 5_entity: light.swiatla_w_domu 6_link: '#lights_backyard' 6_name: Podwórko 6_icon: mdi:dome-light 6_entity: light.swiatla_na_zewnatrz 7_link: '#state' 7_name: Stan domu 7_icon: mdi:home-assistant 8_link: '#cctv' 8_name: Monitoring 8_icon: mdi:cctv width_desktop: 800px is_sidebar_hidden: true highlight_current_view: true

Thank you! 🍻

joshnewman17 commented 2 months ago

I am experiencing this same issue.

Clooos commented 2 months ago

I know what is happening here, I will fix that for the next release.

Clooos commented 2 months ago

I've released a new beta that should definitely fix that issue, here is the changelog:

https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-beta.2

krzysiek2788 commented 2 months ago

I've released a new beta that should definitely fix that issue, here is the changelog:

https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-beta.2

I'm afraid issue is still there. I have updated it and the error is still there. very strange issue. By other error type: image

Clooos commented 2 months ago

Damn, can you tell me what is the layout you are using for your dashboard?

krzysiek2788 commented 2 months ago

It's Grid layout card

Clooos commented 2 months ago

Could you try this version with the manual install method? I really hope that this is fixed now 🤞

bubble-card.js.zip

krzysiek2788 commented 2 months ago

I replaced file in installation folder and restarted browser but this error remains unchanged.

Clooos commented 2 months ago

You need to follow the steps I've sent, doing this is not working. Just remove it from from HACS first.

dammic00 commented 2 months ago

I am experiencing the same problem, however I am encapsulating the horizontal bubble card in a decluttering template. If I create manually without the template, it does work. see code below. Template: footer_sticky_menu: card: type: custom:bubble-card card_type: horizontal-buttons-stack 1_link: home1 1_icon: mdi:home 2_link: lights 2_icon: mdi:lightbulb 3_link: cameras 3_icon: mdi:cctv 4_link: '#thermo' 4_icon: mdi:heat-wave 5_link: '#FamilyRemote' 5_icon: mdi:remote rise_animation: false 6_link: '#garage' 6_icon: mdi:garage 7_icon: mdi:account-voice 7_link: '#ann' 8_icon: mdi:motion-sensor 8_link: '#motion' is_sidebar_hidden: true

Card on dashboard: type: custom:decluttering-card template: footer_sticky_menu

krzysiek2788 commented 2 months ago

You need to follow the steps I've sent, doing this is not working. Just remove it from from HACS first.

Sorry for late response. I have done that but the issue is still the same, restarted HA and cleared browser cache image

Clooos commented 2 months ago

This issue is now fixed in the new beta!

https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-beta.3

dammic00 commented 2 months ago

Thanks, Cloos, this has fixed my issue!

Clooos commented 2 months ago

Yeah, I was not sure! Thanks for the feedback!

krzysiek2788 commented 2 months ago

Maybe that solved dammic00 issue but mine stays like it was 🤣 nothing changes.

Clooos commented 2 months ago

Are you sure that you are on the last beta, you can see that in the editor.

krzysiek2788 commented 2 months ago

Are you sure that you are on the last beta, you can see that in the editor.

Yes it is the latest version even restart didn't change anything.

dammic00 commented 2 months ago

Noticed that the dashboard tab view-type cannot be set to sideview or sections view, masonry or vertical do not exhibit the error.

Clooos commented 2 months ago

Thanks for the info! I will take a look at this tomorrow.

joshnewman17 commented 2 months ago

I am still experiencing the same issue on the latest beta. Thanks for all the hard work! My new mobile dashboard is coming along great but the tablets that use grid view are having trouble.

Edit: Just noticed that while my kindle fire tablets show "Cannot read properties of undefined (reading 'contains')" my iPad Pro had a slightly different error with the same dashboard. "undefined is not an object (evaluating 'e.parentNode.parentNode.classList.contains").

Clooos commented 2 months ago

This issue should be fixed now, I'm waiting for your feedback 🤞

https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-beta.6

krzysiek2788 commented 2 months ago

That is true the issue is finally solved. Many thanks

Clooos commented 2 months ago

Finally! 😀