Bubble Card Forces Layout to be Single Column on Desktop

[aredon]

Describe the bug
Bubble card appears to now force the layout of my dashboards to be a single-column mobile-like format on any dashboard where it is present. Removing bubble card from HASS restores expected dashboard layout.

To Reproduce
Steps to reproduce the behavior:

1. Install bubble card 1.6.2
2. View a dashboard where bubble card is set up on desktop
3. ????
4. Pull hair out

Expected behavior
Multiple columns and typical masonry layout behavior

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome, Firefox, incognito mode as well
• Version: 1.6.2

[Clooos]

Thanks for your feedback!

I will fix that in the next release.

Edit: One more question, does it happens if you remove all the Bubble Cards from your dashboard, then can you try to add just some pop-ups with some content in it. If you don't have this issue with just pop-ups it will be a bit easier for me to fix that 🤞

[mrfrag1]

I removed all bubble cards.
Then restart and clear cache.
Problem still exists.

[mrfrag1]

The first view after reboot is ok. Then I press edit dashboard and from then on it's just in one column.

[aredon]

Thanks for your feedback!

I will fix that in the next release.

Edit: One more question, does it happens if you remove all the Bubble Cards from your dashboard, then can you try to add just some pop-ups with some content in it. If you don't have this issue with just pop-ups it will be a bit easier for me to fix that 🤞

Bad news bears. This page had no pop-up cards on it only the bubbles at the bottom of the page (and some dividers). My bubbles at the bottom of the page actually navigate to a different page of the dashboard to open a pop-up there instead. (This way I don't have to duplicate popups anytime I want to make a change).

[Clooos]

Well I've changed something that fixed an issue for some users in the new version, but I will add a toggle to turn off that in the next release (or something else if I find a better solution).

[Clooos]

I've found a temporary fix on Reddit:
https://www.reddit.com/r/homeassistant/s/D4F4EIf6u9

[aredon]

Well I've changed something that fixed an issue for some users in the new version, but I will add a toggle to turn off that in the next release (or something else if I find a better solution).

I was also getting the extra column issue in previous versions. I assume that's what you're referring to.

[Clooos]

Yes that was that issue, and that's a tricky one apparently 😅

[aredon]

I've found a temporary fix on Reddit: https://www.reddit.com/r/homeassistant/s/D4F4EIf6u9

I'll note that the issue was happening with regular masonry - not just layout-card.

[DrBlackRat]

I've also just run into this issue after updating, there just being one single bubble card (in my case the separator) was enough to force everything into one column.

Edit:
This only started to happen after we updated to HA 2024.1.2 and downgrading the bubble card addon to 1.5.3 did NOT fix the issue for me,

[aredon]

I've also just run into this issue after updating, there just being one single bubble card (in my case the separator) was enough to force everything into one column.

Edit: This only started to happen after we updated to HA 2024.1.2 and downgrading the bubble card addon to 1.5.3 did NOT fix the issue for me,

I'll make another note here that downgrading to 1.5.3 DID solve the issue for me. So I would question if you ran into a browser cache issue. The offending code shouldn't be present at all.

[DrBlackRat]

I've also just run into this issue after updating, there just being one single bubble card (in my case the separator) was enough to force everything into one column.
Edit: This only started to happen after we updated to HA 2024.1.2 and downgrading the bubble card addon to 1.5.3 did NOT fix the issue for me,

I'll make another note here that downgrading to 1.5.3 DID solve the issue for me. So I would question if you ran into a browser cache issue. The offending code shouldn't be present at all.

Okay yeah, I did make sure to force refresh but it still showed the same issue, just tried it again and now it's fixed by downgrading... my bad :/

[Clooos]

Hi, this is fixed in the new 1.6.3!

And if it's now working, take a look at the changelog to understand how to apply the fix.

https://github.com/Clooos/Bubble-Card/releases/tag/v1.6.3

[aredon]

Alas - now it just forces there to be two columns instead.

[nielsvanvelzen]

I started using bubble card a few days ago and immediately ran into this issue. The fix (adding column_fix: true to the first bubble card) does not work. When I add it and save the card everything works, until I refresh the page and everything is a single column again.

It also feels weird I have to opt-in in a custom card integration to get the default behavior for the masonry layout.

[Clooos]

There is an issue with the default behavior because if you have pop-ups, the space your vertical-stacks should take will be empty. I'm still looking for a cleaner solution but it's complex because hiding it in CSS is not enough.

[aredon]

High-level but is there any way to change the parent of the pop-up cards? Seems like the badges area would be a good place to tuck things that wouldn't mess with the layout too much.

The column-fix is kind of working but is still a bit clunky. My main page has pop-up cards but no floating bubbles at the bottom. It doesn't take the column fix until I toggle the sidebar minimizer. If I visit a page that has floating bubbles at the bottom and no pop-up cards that page loads fine and then the other tabs seem to as well.

[aredon]

How do the default conditional cards handle "hiding" from the layout? Maybe just piggy back on those?

[Clooos]

I will investigate on that!

[barrelltitor]

@Clooos Not sure if this is the same issue, however while the space is empty for me, the position of all other cards is still kept unlike e.g conditional as aredon said above
for example:

I wanted to make a separate issue for this, but it seems to fit in this one

[aredon]

Actually I have this issue also. Seems like it's maybe the phantom column issue again. If you remove the bubble cards that float at the bottom of your screen does the issue go away?

[aredon]

I tried v1.7.0 today and this issue resurfaced even with column_fix. I tried all kinds of values and nothing seemed to have any impact. What exactly do the values do? The documentation is a bit vague and I couldn't find any difference between -10 and -5000. I've rolled back to v1.6.3 for now.

[Clooos]

Indeed, I should provide more details on this topic. The value in question is associated with the way the Home Assistant dashboard works, which determines the display of content based on the card size. However, this size is not determined by its CSS size (which would be simpler, but there are other reasons for this) but by a value that defines the space it should occupy within the columns.

Here's an example from the official Home Assistant developer documentation:

  // The height of your card. Home Assistant uses this to automatically
  // distribute all cards over the available columns.
  getCardSize() {
    return 3;
  }

For instance, a default Home Assistant card with the smallest height will have a "CardSize" of 1 (approximately 50px). So, if you have 10 of these in a pop-up, you need to define a negative value to ensure that the pop-up completely disappears from your view. However, I have yet to find a way to calculate this automatically, but it's not that easy...

Another issue is that the column_fix will be added to every single Bubble Card, not just the pop-ups. So, if you have 10 Bubble Cards on your view and column_fix is set to -10, it will total -100. You can set it to 0, but it will behave as if the vertical stacks are still on the view if you have more than just Bubble Cards in it. The vertical stacks/pop-ups will be hidden, but they will still occupy the space of the non-Bubble Cards you've added.

It's likely possible to calculate it perfectly, but it's a bit challenging if you don't know the "CardSize" of all your cards. The only way to determine it is by examining the source code of that cards.

To be honest I know that this is a dirty hack, that's probably why I've not explained it in details... and I'm not even sure that my explanation is clear 😅

But if it was perfect for you in the v1.6.3 you can change that value to 0, that was the previous default.

[aredon]

The trouble is the issue is happening even on dashboard pages where pop-up cards and other hidden cards aren't even present. I have a couple dashboards where I am only using the separator cards (because they are by far the nicest I've seen). So I'm not sure what to do in that situation.

v1.6.3 (no column_fix)

v1.7.0 (before page edit or sidebar toggle)

v1.7.0 (after page edit or sidebar toggle)

column_fix does not appear to make any difference at all in this circumstance

[Clooos]

Have you tried with a column_fix of 0 or 1 on these views?

[aredon]

Upgraded to v1.7.2 and tried values of 0 and 1. No difference. It is still being forced to be a single column.

Dare I ask the silly question of why column fix is needed on these views at all? There's no pop-up cards and no bar at the bottom. Shouldn't the separator cards just be.... normal?

As an aside, I tried these column_fix values on a view that does have pop-ups: 0,1,10,100,500,1000,-10,-100,-500,-1000 and nothing different happened. The layout is forced into 2 columns instead of the original 3.

Will be rolling back to v1.6.3 unfortunately.

[Clooos]

Have you refreshed the page after each changes? If yes, and if you can confirm that the v1.6.3 was not altering the layout, I will probably replace that behavior with the original one from that version.

[aredon]

Yep refreshing the page doesn't help. If anything it's always worse after a refresh. The layout may become 2 column or even 3 (but badly staggered) again after an edit and snap back to single column after a refresh. Toggling the sidebar sometimes brings it back. Very odd behavior in general.

v1.6.4 also seems to work ok.

[arkpoah]

I also get layout issues since I upgraded to 1.7 versions, especially when using separator.
By default my layout has 4 vertical-stacks, which shows 4 columns, I use one or more bubble-card separator by column.
Since 1.7 release, when a column has more than one separator, my layout breaks and is displayed with 3 columns.

[MG-PL-MG]

I also have that issue even when creating completely empty dashboard. after adding pop-up all changing to one column and appear at the bottom. Adding column_fix moves content up but pop-up is still at the bottom.

[Clooos]

This is fixed in the v2 beta!

Here is the link to the full changelog:
https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-beta.1