Pop up on mobile

[Tmatz27]

I'm having issues where my pop ups get triggered but display nothing. But if I switch to a different dashboard then come back the pop up operates as expected. I've force closed the mobile app and cleared cache and it first time to the dashboard the pop up window does not work

[Clooos]

Hi, I will release a new beta soon, there is a feature that is broken at the moment (Update pop-up in background) that I've fixed and that could solve your issue. I still don't know why but some pop-ups have difficulties to display when combined with some custom cards.

By the way can you send me the YAML of this pop-up?

[Tmatz27]

I have a 1 page dashboard with a lot of popups haha. The dashboard whole yaml is huge! I can send more if you want but here is one of the popups giving issues.

`type: vertical-stack cards:

• type: custom:bubble-card card_type: pop-up hash: '#plex' name: '' force_icon: true show_header: true bg_color: '#000000'

• type: custom:auto-entities filter: exclude:

  • state: unknown
  • state: unavailable
  • state: 'off' include:

  • entity_id: 'plexsession*' options: entity: this.entity_id type: custom:button-card variables: entity: this.entity_id custom_fields: picture: card: type: picture image: | [[[ if (states[variables.entity].attributes.grandparent_thumb != ''){ return "https://plexdat.duckdns.org/api/v2?apikey=b0290a1b933f4388b590a3a2422c66e5&cmd=pms_image_proxy&img=" + states[variables.entity].attributes.grandparent_thumb + "&width=300&height=450&fallback=poster&refresh=true"; } else { if (states[variables.entity].attributes.thumb != ''){ return "https://plexdat.duckdns.org/api/v2?apikey=b0290a1b933f4388b590a3a2422c66e5&cmd=pms_image_proxy&img=" + states[variables.entity].attributes.thumb + "&width=300&height=450&fallback=poster&refresh=true"
    } else { return states['sensor.' + states[variables.entity].attributes.user + '_session_thumbnail'].state } } ]]] card_mod: style: | ha-card { box-shadow: 0; border-radius: 0; margin: 5px 0 0 -5px; } ha-card img { min-height: 100px; min-width: 100px; } bar: card: type: custom:bar-card entities:

    • entity: this.entity_id attribute: progress_percent unit_of_measurement: '%' positions: icon: 'off' indicator: 'off' name: inside height: 19px color: | [[[ if (states[variables.entity].state == 'playing') { return '#2986cc'; } else if (states[variables.entity].state == 'paused') { return '#e49f29'; } else { return '#000000'; // Default color if neither playing nor paused } ]]] card_mod: style: |- ha-card { --ha-card-background: none; border: none; box-shadow: none; } ha-card #states { padding: 0; } bar-card-currentbar, bar-card-backgroundbar { border-radius: 5px; left: 0; } bar-card-name { margin-left: 3%; text-shadow: 1px 1px 1px #0003; } bar-card-value { margin-right: 3%; text-shadow: 1px 1px 1px #0003; } user: | [[[ return "" + states[variables.entity].attributes.user + "" ]]] title: | [[[ if (states[variables.entity].state == 'playing') { return " " + states[variables.entity].attributes.full_title; } else { if (states[variables.entity].state == 'paused') { return " " + states[variables.entity].attributes.full_title; } else { return states[variables.entity].attributes.full_title; } }

      ]]]

      stream_label: Stream stream: | [[[ return states[variables.entity].attributes.video_resolution + " > " + states[variables.entity].attributes.transcode_decision + " > " +states[variables.entity].attributes.stream_video_resolution + "" ]]] product_label: Product product: | [[[ return states[variables.entity].attributes.product ]]] media_detail: | [[[ if(states[variables.entity].attributes.media_type == 'movie') { return " (" + states[variables.entity].attributes.year + ")"; } else { return " S" + states[variables.entity].attributes.parent_media_index + " • E" + states[variables.entity].attributes.media_index; } ]]] bandwidth_label: Bandwidth bandwidth: | [[[ var bytes = states[variables.entity].attributes.bandwidth * 1000; var sizes = ['Bytes', 'Kbps', 'Mbps', 'Gbps', 'Tbps']; if (bytes == 0) return 'n/a'; var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1000))); if (i == 0) return bytes + ' ' + sizes[i]; return (bytes / Math.pow(1000, i)).toFixed(1) + ' ' + sizes[i]; ]]] card_mod: style: | ha-card { box-shadow: 0; padding: 0; margin: 0; border: 0; } ha-card #container { margin: 5px 0 0 0; }

      name {

        display:none;
      }

      styles: card:

      • height: 100x
      • padding: 0 custom_fields: bar:
        • text-transform: capitalize
        • font-size: 13px user:
        • text-align: end
        • font-size: 15px title:
        • text-align: start
        • font-size: 13px stream:
        • text-transform: capitalize
        • text-align: start
        • font-size: 13px product:
        • text-transform: capitalize
        • text-align: start
        • font-size: 13px player:
        • text-transform: capitalize
        • text-align: start
        • font-size: 13px location:
        • text-transform: uppercase
        • text-align: start
        • font-size: 13px media_detail:
        • text-transform: uppercase
        • text-align: start
        • font-size: 13px bandwidth:
        • text-transform: capitalize
        • text-align: start
        • font-size: 13px product_label:
        • text-transform: uppercase
        • text-align: end
        • font-size: 10px player_label:
        • text-transform: uppercase
        • text-align: end
        • font-size: 10px stream_label:
        • text-transform: uppercase
        • text-align: end
        • font-size: 10px location_label:
        • text-transform: uppercase
        • text-align: end
        • font-size: 10px bandwidth_label:
        • text-transform: uppercase
        • text-align: end
        • font-size: 10px grid:
      • grid-template-areas: | "picture product_label product" "picture player_label player" "picture stream_label stream" "picture location_label location" "picture bandwidth_label bandwidth" "picture bar bar" "picture title title" "picture media_detail user"
      • grid-template-columns: 1fr 60px 3fr
      • grid-gap: 5px 10px card: type: vertical-stack card_param: cards
• type: custom:upcoming-media-card entity: sensor.radarr_radarr_upcoming_media title: Upcoming Movies date: ddmmyy clock: 12 max: 10 image_style: fanart hide_empty: true hide_flagged: true flag: true text_shadows: true box_shadows: true enable_transparency: true collapse: flag=true filter: >- {{ 'flag=true' if not title in states.sensor.tautulli_watched.state else 'flag=false' }} sort_by: release sort_ascending: true enable_tooltips: true
• type: custom:upcoming-media-card entity: sensor.sonarr_upcoming_media title: Upcoming TV date: ddmmyy clock: 12 max: 6 image_style: fanart hide_empty: true hide_flagged: true flag: true text_shadows: true box_shadows: true enable_transparency: true collapse: flag=true filter: >- {{ 'flag=true' if not title in states.sensor.tautulli_sonarr_watched.state else 'flag=false' }} sort_by: release sort_ascending: true enable_tooltips: true title: Plex '

[Clooos]

Probably an incompatibility with custom:upcoming-media-card, I hope the new beta will fix this issue.

[Tmatz27]

Maid Dashboard YAML.txt

Attached is my full dashboard YAML. I have a ton of custom cards in there to make it easy to navigate on a phone. The only issue currently is the Plex/Upcoming Show/Movie cards on the 1st page of the dashboard. I have the same popup on page 2 and it works fine or if i go to a completely different dashboard open thing then go back to the main dashboard it works as expected. I can replicate this on Android devices and windows. After the update ill let you know what if its fixed! if there is anything else i can do let me know im here to help were i can!

[Clooos]

Perfect, I will do my best to release the new beta this week 🤞