Make the popup appear as an actual popup

[frozenhellguard]

Goal

As can be seen in a few screenshots here, for example: #305

Loving the card and I use the popups as is on my mobile with a set height, works wonders! I'm trying to incorporate them in my new tablet dashboard now, but I feel that the current function of the popups is not what I'm looking for. Hence why I'm using browser_mod popups for now, but I'd love to use Bubble Card instead!

I'm trying to get the popup to not be attached to the bottom of the screen for my tablet dashboard. I want them to appear in the middle of the screen instead and either set the height to fit the content or set the height manually. Is this possible at all? Didn't get any of the code snippets from the other topic to work, might be due to outdated code, etc.

Thanks in advance!

Source Yaml

type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: pop-up
        hash: "#media"
        icon: fas:computer
        styles: |
          #root.pop-up.is-popup-opened {
            transform: scale(1) translate(0, -50%);
            display: flex;
          }

          #root.pop-up {
            top: calc(50% + var(--header-height));
            transform: scale(0) translate(0, 50%);
            display: none;
            max-height: 100%
          }
        show_header: false
        button_type: slider
        entity: media_player.hall_2
        show_icon: true
        show_state: false
        show_last_changed: false
        show_attribute: false
        card_layout: normal
      - type: custom:bubble-card
        card_type: media-player
        entity: media_player.hall_2
        button_type: slider
      - type: custom:bubble-card
        card_type: media-player
        entity: media_player.kontor_2
        show_state: false
        show_attribute: false
      - type: custom:bubble-card
        card_type: media-player
        entity: media_player.kok_2

Which step did you already try?

#root.pop-up.is-popup-opened {
  transform: scale(1) translate(0, -50%);
  display: flex;
}

#root.pop-up {
  top: calc(50% + var(--header-height));
  transform: scale(0) translate(0, 50%);
  display: none;
  max-height: 100%
}

Problem

No response

Read the documentation

• I have read the documentation

[frozenhellguard]

I managed to get it off of the ground atleast with the following:
#root.pop-up { height: 300px; bottom: 60vh; transform: translateY(100%); padding: 18px; }

The problem is that the bottom part of the card isn't rounded. I tried adding border-radius etc to the css classes I found in the styles.css but I can't seem to get it to work.

[octoTurnip]

Hey I was able to style it like a "Pop-Up" dialogue box and made it into a module for the beta if you want to try it out! (link)

Or if you just want the code, this is what I did:

#root:not(.editor){
  position: fixed;
  top: 50% !important;
  transform: translate(0, -50%) !important;
  vertical-align: center !important;
  height: 70vh !important;
  --desktop-width: 70vw !important;
  width: 99%;
}
.bubble-pop-up-container{
  padding: 20px !important;
  mask-image: none !important;
}
.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;
}

Hope this helps :)

[Clooos]

Hi, I tried this module and it works great 👌

This feature is actually in my to-do list, and I will add it at some point 🙂

[octoTurnip]

That's awesome! I'm happy to hear! I look forward to seeing it in the future.

Keep up the amazing work. Such an amazing product.