Feature Request: Set end of PopUp Card. Adjust height

[mrfrag1]

I can't find a way to adjust the height of the pop up card.

It's always OpenEnd...

Thanks, its a perfect Project.

[mrfrag1]

My yaml

type: vertical-stack
cards:

• type: custom:bubble-card
  card_type: pop-up
  hash: '#shutter'
  name: Rolläden
  icon: mdi:window-shutter
  entity: light.alle_lampen
  width_desktop: 600px
  width_mobile: 600px
  margin_top_mobile: 7px
  margin_top_desktop: 13px
  styles: |
  #root {
  opacity: 0.95;
  }
  auto_close: 15000

• type: custom:bubble-card
  card_type: separator
  name: Küche - Wohnzimmer
  icon: mdi:countertop-outline
  card_mod:
  style: |
  ha-card {

    margin-top:0px;
    margin-bottom: -10px;
    
  }
  

• type: horizontal-stack
  cards:

  • type: tile
    entity: cover.rolladen_kuche
    hide_state: false
    show_entity_picture: true
    features:
    • type: cover-open-close
    • type: cover-position
      name: Küche
  • type: tile
    entity: cover.rolladen_terrasse
    hide_state: false
    show_entity_picture: true
    features:
    • type: cover-open-close
    • type: cover-position
      name: Terasse

• type: horizontal-stack
  cards:

  • type: tile
    entity: cover.rolladen_tv
    hide_state: false
    show_entity_picture: true
    features:
    • type: cover-open-close
    • type: cover-position
      name: TV
  • type: tile
    entity: cover.wohnzimmer_gross
    hide_state: false
    show_entity_picture: true
    features:
    • type: cover-open-close
    • type: cover-position
      name: Wohnz. groß

• type: custom:bubble-card
  card_type: separator
  name: Schlafzimmer
  icon: mdi:bed
  card_mod:
  style: |
  ha-card {

    margin-top: -0px;
    margin-bottom: -10px;
  }
  

• type: horizontal-stack
  cards:

  • type: tile
    entity: cover.rolladen_balkon
    hide_state: false
    show_entity_picture: true
    features:
    • type: cover-open-close
    • type: cover-position
      name: Balkon
  • type: tile
    entity: cover.schlafzimmer_gross
    hide_state: false
    show_entity_picture: true
    features:
    • type: cover-open-close
    • type: cover-position
      name: Schlafz. groß

[Clooos]

Hi! You can change the margin_top_mobile and the margin_top_desktop with a value like 120px, this will adjust the height of the pop-up 🙂

[martinhoess]

I think he means something else.
For example, if you set the top margin to 50%, then the whole popup moves out of the visible area at the bottom. Even if the content of the card only has one element. This means that the popup always has a fixed size and does not change its size based on the content.

It would be useful if you could set a minimum size for the popup and it would only get bigger when there is more content.

[Clooos]

I love it! I will add that in a future release.

[timvdsm]

I love it! I will add that in a future release.

That would be absolutely great! I have dynamic content for the pop-up (lights or covers that are on/open/closed). It would be great to have the size of the pop-up aligned with the content.

[psi-4ward]

So I'm hooking up here.

Use-Case: Mobile view (with sticky footer icons to trigger popups). I've my phone in my hand and tap on the "open-popup-btn" and the popup opens:

Now I have to move up all the way to the buttons and cross the blank space.

Much better UX would be this:

The target buttons are near the thumb and I can click it right the way.

I know, there is margin but what about changing the CSS to something like

.pop-up {
  height: auto;
  top: unset;
  bottom: 0;
  transform: translateY(100%);
}
.pop-up.open-pop-up {
  transform: translateY(0);
}

Edit: A working solution

This example displays all Scenes in a popup tied to the bottom:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#popup'
    name: Scenes
    styles: |
      #root.pop-up {
        height: auto;
        top: unset;
        bottom: 0;
        transform: translateY(100%);
        padding: 18px;
      }
      #root.pop-up.open-pop-up {
        transform: translateY(0);
      }
  - type: custom:auto-entities
    card:
      square: false
      type: grid
    card_param: cards
    filter:
      include:
        - domain: scene
          options:
            type: custom:button-card
            entit: this.entity_id
            size: 50px
            tap_action:
              action: call-service
              service: scene.turn_on
              data:
                entity_id: entity
      exclude: []

This looks not very nice so we should it display centered on desktop

[psi-4ward]

And something for deskopt:

              @media only screen and (min-width: 450px) {
                #root.pop-up.open-pop-up {
                  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%
                }              
              }

[rcjkierkels]

For the current v2.0.0-beta.6 version you should replace open-pop-up with is-popup-opened

I am currently using the power of jinja to have this feature on the popups

# lovelace_gen
# More info: https://github.com/Clooos/Bubble-Card?tab=readme-ov-file#pop-up
type: custom:bubble-card
card_type: pop-up
hash: "#{{ id }}"
name: {{ name }}
icon: {{ icon }}
back_open: true
margin: 15px
is_sidebar_hidden: true
bg_color: "#121212"

# More info: https://github.com/Clooos/Bubble-Card/discussions/305
{% if enable_dynamic_height %}
styles: |
  #root.pop-up {
    height: auto;
    top: unset;
    bottom: 0;
    transform: translateY(100%);
    padding: 18px;
    padding-bottom: 80px
  }
  #root.pop-up.is-popup-opened {
    transform: translateY(0);
  }
{% endif %}

And then I create popups like this:

type: vertical-stack
cards:
  - !include
    - ./_popup.yaml.jinja
    - id: gang
      icon: mdi:stairs
      name: "Voordeur / Gang"
      enable_dynamic_height: true
  - type: custom:bubble-card
    card_type: separator
    name: Voordeur
    icon: mdi:door
  - type: "custom:button-card"
    template: card_light
    entity: light.voordeur
    variables:
      ulm_card_light_enable_slider: true
      ulm_card_light_enable_collapse: true
      ulm_card_light_enable_color: true
      ulm_card_light_force_background_color: true
      ulm_card_light_enable_horizontal: true
      ulm_card_light_enable_popup_tap: true

Using this extension: https://github.com/thomasloven/hass-lovelace_gen