[Styling Module] Pop-Up Box

[octoTurnip]

Module post template

-> Pop-Up Box

Version: v1.2
Creator: -> octoTurnip

Important

Unsupported cards:

• Button
• Cover
• Climate
• Horizontal buttons stack
• Media player
• Select
• Separator
• Calendar

My module styles your Bubble-Pop-Up card to look like the Home Assistant's more-info dialogue Pop-Up box.
Enable this module via the editor.

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

more_info_popup:
  name: "Pop-Up Box"
  version: "v1.2"
  creator: "octoTurnip"
  link: "https://github.com/Clooos/Bubble-Card/discussions/1376"

  unsupported:
    - button
    - cover
    - climate
    - horizontal-buttons-stack
    - media-player
    - select
    - separator
    - calendar

  description: |
    This will style the pop-up to look like a more-info style pop-up.

  code: |
    #root:not(.editor){
      top: auto !important;
      height: auto !important;
      max-height: 70vh !important;
      width: 97%;
      --desktop-width: 60vw !important;
      margin-left: auto !important;
      margin-right: auto !important;
      bottom: auto !important;
      align-self: anchor-center;
    }
    .bubble-pop-up-container{
      padding: 20px !important;
      mask-image: none !important;
      overflow: scroll;
    }
    .bubble-pop-up-background{
      border-radius: 20px !important;
      border: solid 1px var(--primary-color);
    }
    .bubble-backdrop{
      transition-delay: 0 !important;
      transition: opacity 0.2s !important;
      background-color: null !important;
    }
    .is-popup-closed { 
      opacity: 0;
      transition: opacity 0.4s !important;
    }
    .is-popup-opened, .is-popup-closed.editor {
      opacity: 1;
      transition: opacity 0.2s !important;
    }

---

Screenshot:

Desktop (v1.2):

Mobile (v1.2):

Quick notes:

Per Home Assistant Frontend style:

• The max-height for desktop should be calc(100% - 72px) but I cannot get the module to style the height differently for mobile and desktop _{(maybe i can get help)}.
  • Instead I've changed it to 70vh that way the bottom will still wrap if you don't have too many cards in it.
• The desktop width should be 90vw but i changed it to 60vw because I think it makes the Bubble Pop-Up look better.
  • One thing I've tried to solve this was to make it look like a "Grid-layout" but, it can look weird depending on what cards you are using in the Pop-up. If you'd like to try it, use the following code in your styles:

  .bubble-pop-up-container{
    display: grid;
    grid: auto auto / auto auto;
    grid-gap: 10px;
    align-items: start;
  }
  

• There is no outlines on regular Pop-up's. But on mine I added border: solid 1px var(--primary-color);.
  • This is so you can tell it apart from the others.
  • It also uses your primary color as the outline: var(--primary-color)

Update history:

v1.2

• added overflow: scroll; to the container in case there are sizing issues. That way you wont lose any card details.
• fixed dropdown boxes. They used to look like this:

v1.1

• pop-up box now automatically resizes depending on how many cards there are
• changed the desktop width so cards don't look so stretched out

v1.0

• Initial release

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️

[octoTurnip]

Updated to v1.1 :)

• pop-up box now automatically resizes depending on how many cards there are
• changed the desktop width so cards don't look so stretched out

(I will upload updated photos later)

[cwrau]

Hey, sounds like a great module, but I couldn't find out how to use it? 😅

[octoTurnip]

I guess I don't understand. Are you having problems with all modules working or just mine?

Maybe if you post your yaml I can see what's wrong.

[Clooos]

Have you installed Bubble Card v3.0.0-beta? The module feature is only available in this version.

[cwrau]

@Clooos Yes! That's what I was missing! Thank you 🙏

The module works perfectly, thanks @octoTurnip!

[octoTurnip]

Updated to v1.2 !!!

• added overflow: scroll; to the container in case there are sizing issues. That way you wont lose any card details.
• fixed dropdown boxes.

Let me know if there are any styling changes or other features you would like to see!

[Arbujl]

Hello @octoTurnip, On Edge all good, but same issue on IOS.
Too bad, I liked the simplicity.

[Clooos]

Have you checked in the Bubble Card editor, at the bottom if you have the correct version on iOS?

[Arbujl]

On IOS I have v3.0.0-beta.7 for Bubble Card and v1.2 pour the module.
Not sure to understand where can I found what you said ….

[dragonlee429]

I have the exact same issue, works on chrome with window laptop, but when tested on iphone it shows nothing.

[Clooos]

On IOS I have v3.0.0-beta.7 for Bubble Card and v1.2 pour the module. Not sure to understand where can I found what you said ….

Forget what I said, I have this issue as well on Safari Mac and on iOS.