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

works for me in this configuration

title: Home
views:
  - path: default_view
    title: Home
    cards:
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: '#prueba'
            name: prueba
            icon: mdi:test-tube
          - type: custom:bubble-card
            card_type: separator
            name: separador de prueba
            icon: mdi:air-conditioner
      - type: custom:bubble-card
        card_type: horizontal-buttons-stack
        1_link: '#prueba'
        1_icon: mdi:chart-line

see if that test code works in a test environment before moving further.

I think its your type in the horizontal stack from looking at it, “- type:”

Ok, I can answer myself. I’m feeling a bit stupid. The pop up card was in another tab, an apparently it has to be in the same tab as the button to open it.

I have another question.

I have successfully configure a pop up to show a graph. The graph is configure to fit in the mobile screen, but after adding the pop up card button at the top of the card, a scroll appears and it’s not possible to see the whole graph without scrolling

Is there any way to hide the pop up card button? As the button to close the card also appears at the button, I think it is redundant.

I’m glad that you fixed your issue! For your question you can change the order of your horizontal buttons stack by putting it before your pop-up, or you can use a regular button to open your pop-up. Here is an example from the documentation:

ok, but that system hide the bottom button, what I want to hide is the pop up card defined in the vertical stack, the one marked in red:

I think the button in the bottom is more useful in a mobile view as your fingers are usually at the bottom of the screen.

To hide the header you can add this to your pop-up card in YAML:

    styles: |
      .pop-up > :first-child {
        display: none !important;
      }

Thanks, that worked perfectly.

Hi guys, just start playing with these cards, but how can I get rid of the top “unused” space?

Is there a theme or something? Before I had mushroom :mushroom: cards, can I use that theme for mobiel?

Hi,

have a question about the „Separator“ I‘d like to have the icon and font-size a little bigger. How do I achieve this?

I already tried the following approach:

styles: |
  ha-card { 
    font-size: 12px;
  }

Just to see if I can change the font-size… but that doesn‘t seem to work

Any help would be much appreciated :wink:

Have you tried with font-size: 20px !important; ?

Yeah, just tried… but makes no difference… nothing changes…

I‘m trying to do this on an iPad… should I better try on a PC?

Edit: PC doesn‘t make a difference either…

I will need to try, it’s maybe a bit different on that one.

Edit: This is working:

    styles: |
      * {
        font-size: 20px !important;
      }

Yes, that works for the font-size :wink: Thanks! Tried it also for icon-size but there it has no effect…

Edit: just noted that icon-size changes accordingly to the changed font-size

Im trying to integrate a popup on a picture elements card,

But when i load the page, i get an empty card in the middle of the page.

I added the popup fix to the configuraiton.yaml and cleared my cache, but it still displays

  - type: custom:hui-element
    card_type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: pop-up
        hash: '#sittingroom'
        name: Sitting Room
        icon: mdi:sofa
        entity: light.sitting_room
        back_open: true
    style:
      left: 50%
      top: 50%

Can I get rid off the “pop up” bar, on only one “ view” ?

I see other have asked but not sure if I’m missing something - is this ONLY for buttons? Is there any way for showing entity state/text in a bubble card? If not, what do people use to maintain styling across a dashboard?

You can combine cards

Sure but they have different styling so [maybe?] don’t quite work together holistically?

You can use card_mod to style the other cards

Hi, you can hide the header by adding a custom style to your pop-up, this is already explained here: