⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch

Great, is it possible to edit the length of the card? Because if I set a margin at the top like in the picture, part of the card will be hidden. Is it possible to set it to a specific height or to adjust to the screen size?

I have some weird behaviour with lovelace-xiaomi-vacuum-map-card in a Bubble Card.
On desktop when clicking the dropdown:


On mobile when clicking the dropdown:
222
And if I click the dropdown on a normal card (not bubble card), works with mobile and desktop:
33

Cloos, love the Bubble Cards and am enjoying exploring new ways to organize my cards and pages. Thank you for sharing!

I have an issue that I’m running into when trying to activate a scene using sub-buttons, there are 4 scenes. I edit the sub-buttons tap action to include a Call service with scene.turn_on and give the scene name, save and close the editor. Now all the sub-buttons activate the scenes perfectly. If I now go in to edit that bubble card for any reason, all of the scene entities are blank, which obviously means the buttons do not work. I see the info message that shows, but since it talks about “data:”, I didn’t see how it applied to my usage, but I still went into YAML and can confirm that on first edit the scene targets show but are then missing upon the next edit. I’m semi-new to HA, so it could be that I’m attempting to do something that can’t be done. I’m hoping someone can duplicate this error, or point me in a better direction. I’d appreciate any help, thank you!

Cloos, one more comment, and now I’m just being picky :wink:

For the Separator card, it seems strange to me to have a blank buffer UNDER the name as opposed to having a buffer ABOVE the name. Is there any ability to adjust or provide an alternative version that would achieve this? See below for how it looks now (left) to a mock up of an alternate (right).

Hi,
How do I change the header and ‘x’ button bg colour for the pop-up card?
-Sayam

Hi,

Love the card so far! but i do got some suggestions…

  1. Could we get sub buttons under the card instead in the line?
  2. Is it possible to add popups in popups ? For ex id like to have a popup to my room and from there i like to have a popup to my media player. When i close the media player popup i would like to see the popup from the room instead of being at home again.
  3. Could we also get conditionals for sub buttons?
1 Like

Hello together,

is it possible that i can click on the “blue circle” to navigate trough a new site? Or is it only possible to do this via “red circle”

image

I also agree with this. The current behaviour is “strange”

I’m wondering if there is any way to make the swipe on the cards based on relative motioon rather than absolute location? When it comes to swiping near the edge of the screen on mobile, it can be difficult to get it all the way to 100%.

If you change the tap action on button to navigate, you can type in a home assistant URL (such as /mobile/test) or change it to URL and put in any URL.

1 Like

Anyone got tips on using card-mod to style the horizontal stack buttons (to call pop ups). I tried this a while ago but it didn’t work. I obviously need the correct CSS code to modify the buttons.

I want to change background colour and elements like outline thickness and colour.

Thanks.

Thanks! But I want to click on the “blue circled” “button” and not on the button itself. Is there any tap_action code to implement? Or this would be great for updates…then i can Click on two different points to get navigate on each other site…

Tap action button controls the button, and tap action icon the icon :blush:

Ok. But with my code I don’t get a click on it …

    type: custom:bubble-card
    card_type: button
    entity: sensor.temperatursensor_1_wohnzimmer_temperature
    show_state: true
    name: Wohnzimmer
    button_type: switch
    tap_action_button:
      action: navigate
      navigation_path: /lovelace/heizung
    icon: mdi:sofa

Try this, that worked for me removing/lovelace/

navigation_path: heizung

No that is not the issue. It is that i can not click on my button to navigate to my site. I want to click on the red “x” to navigate … but there still nothing happens.

image

Aha. As far as I know its only possible with icon or button

Will we get a template card? Or is it somehow possible to change the Icon and Icon Color depending on the state? Right now I do this with the Mushroom Template card like this

type: custom:mushroom-template-card
entity: input_select.washing_machine
primary: Current Status
secondary: '{{ states(''input_select.washing_machine'') }}'
icon_color: '{{ is_state(''input_select.washing_machine'', ''Running'') | iif(''red'', ''blue'') }}'
icon: >-
  {{ is_state('input_select.washing_machine', 'Running') | iif('mdi:play',
  'mdi:pause') }}

Edit:

Figured out the icon color, but not the icon itself. Used CardMod:

card_mod:
  style: |
    ha-icon {
      color: {% if is_state('input_select.washing_machine', 'Running') %} red !important {% else %} rgb(28, 128, 199) !important {% endif %};
    }
2 Likes

Hey @Cloos, Bubble Card v2 is a big step forward and I love the look and features. I haven’t found a single major bug so far, but what I noticed is that the color of the font doesn’t change when switching from dark to light mode (see attached screenshot). It remains white, regardless of the theme used. All other elements in Home Assistant change their color properly.

Playing arroudn with the bubble cards. Nice job.
Hope there will be also cards with integrated graphics, should be awesome.

Question:
I really like the bubble theme but I don’t like the header is off.
Can I adjust the code so the header is on, and how can I manage this?