pop ups not applying styles (HA 0.113 and browser mod 1.1.0) #117

basesnow · 2020-07-24T20:30:17Z

Pop ups are functioning, but style is not being applied. Also noticed on my pop ups that they are not centered on screen. Sometimes are partially off screen.

same here..... styles not applied

Originally posted by @joseska in #115 (comment)

thomasloven · 2020-07-24T20:54:12Z

Since so much is broken anyway, I bit the bullet and moved over to card-mod styles in 1.1.1.
https://github.com/thomasloven/lovelace-card-mod

That means card-mod must be installed for styling to work, and that the syntax is entirely different.

It's a very breaking change, but it's also much more powerful, and means popups can be styled via the theme.
I haven't had the time to come up with a migration guide yet, but I'll keep this issue open and maybe someone will post their discoveries.

Good luck!

basesnow · 2020-07-24T21:06:42Z

Welp, this fixed everything for me. I wasn't modifying style of my pop up cards. So I didn't have to change anything. Updated to latest and now the cards are showing up properly. Quick turnaround is an understatement here! Thanks again

ronaldheft · 2020-07-24T21:44:25Z

Great change here. 1.1.1 fixed all my popup styles and everything is loading perfectly.

theone11 · 2020-07-24T22:30:54Z

Can someone post an example of how to change the width of a popup with the new card-mod?
I tried a few options and couldn't get it to work.

Tried this and still got a small popup

          action: call-service
          service: browser_mod.popup
          service_data:
            card:
              type: custom:mod-card
              style: |
                ha-card {
                  width: 90%;
                  height: 90%;
                }
              card:
                cards:
                  - type: iframe
                    url: http://192.168.1.104/Dashboard
                    aspect: 100%
                type: horizontal-stack
            deviceID:
              - this
            title: UnRAID Server

thomasloven · 2020-07-24T22:51:21Z

Try:

style: |
  :host .content {
    width: 90vw;
    height 90 vh;
  }

thomasloven · 2020-07-24T22:58:17Z

Here's some styles for setting height and width, making a transparent background and setting a border radius

style:
  $: |
    .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
      border-radius: 25px;
    }
  .: |
    :host {
      --mdc-theme-surface: rgba(0,0,0,0);
      --secondary-background-color: rgba(0,0,0,0.5);
      --ha-card-background: rgba(0,0,0,0.5);
    }
    :host .content {
      width: 90vw;
      height: 90vh;
     }

basesnow · 2020-07-25T02:50:17Z

OK, I spoke a little too soon. Pop ups work fine on my fire tablet using fully kiosk. But they don't show up at all now on my iPhone running the HA companion app, or in safari on my Mac. I restarted HA and cleared my cache in the app and in safari, but no luck. The pop ups would show up in 1.1.0, but the styling was messed up. Now I am getting nothing running 1.1.2

thomasloven · 2020-07-25T08:27:51Z

Oh look. Yet another javascript function that safari just doesn't support... I swear it's the IE6 of the 20teens...

I know what the problem is, but won't have time to fix it for a few hours.

thomasloven · 2020-07-25T20:33:33Z

Should work now

UmbeMont · 2020-07-25T21:11:51Z

Hi , same problem , popup mac & iphone not showing any popup , i hold the button , but nothing come out.

thomasloven · 2020-07-25T21:20:06Z

After updating to 1.1.3, try adding ?whatever to the end of the resource URL and do a hard refresh.

UmbeMont · 2020-07-27T07:36:30Z

i do not have browser mod in resources , i only use card mod and i do not have updates available.
1.1.3 version is browser mod ? i updated the version overwrighting the folder , restarted , but still no popups.

thomasloven · 2020-07-28T16:08:45Z

Oh! Silly me. Of course. Sorry about that.

UmbeMont · 2020-07-28T17:28:39Z

Updated just now browser mod folder , restarted and all good but....
The only problem now is when you go on settings , it does not open anymore the setting of the light
Thanks a lot!

ASNNetworks · 2020-08-02T14:26:03Z

Updated just now browser mod folder , restarted and all good but....

The only problem now is when you go on settings , it does not open anymore the setting of the light

Thanks a lot!

That has nothing to do with browser mod, but light-pop-card you use. It has been updated and no longer shows settings. You need to envoke a custom card now. See this for more information.

Protoncek · 2021-10-24T09:45:42Z

Hello!
I'm struggling with styles on simple pop-up card:

service: browser_mod.popup
data:
  title: WARNING!
  deviceID:
    - af7829a2-c1e89390
  large: false
  time: 20
  card:
    type: markdown
    content: This is the warning!
    card_mod:
      style: |
       ha-card {
          background: red;
          color: white;
        }

whatever style i put at the end, styling is not applied (i also tried :host).
Any suggestions how to make this popup with, say, red background and white text?

What i'm trying to do is show popup from automation when certain condition is met.

EDIT: solved. I restarted my PC and for unknown reason above code start to work...

NR3Y · 2023-03-30T21:12:48Z

Hmmm, I'm having a similar issue (styles not being applied).

I have created an automation that throws up a pop-up card when a device changes state. (In this example, a light coming on, but the code is a placeholder for a freezer door being open, when I get around to purchasing the appropriate hardware.)

Trigger (in this case) the light does in fact bring up a popup card, but none of the requested styles are applied.

If anyone has any brilliant suggestions, I'd much appreciate it.

Code from my automation script:

id: '1680206256594'
alias: Test Popup for Light
description: Tests Popup if Light Comes On
trigger:
- platform: state
  entity_id:
  - light.landing
    from: 'off'
    to: 'on'
    condition: []
    action:
- service: browser_mod.popup
  data:
  dismissable: true
  autoclose: false
  content:
  type: custom:popup-card
  entity: light.upstairs_alcove
  title: ACTION NEEDED
  card:
  type: markdown
  style: |
  ha-card {
  color: red;
  width: 100%;
  height: 100%;
  background-color: #3C4048;
  text-align: center;
  padding-top: 0px;
  font-size: 30px;
  }
  content: Alcove Light is On
  size: normal
  mode: single

nochlab1 · 2024-01-23T05:26:40Z

Hmmm, I'm having a similar issue (styles not being applied).

I have created an automation that throws up a pop-up card when a device changes state. (In this example, a light coming on, but the code is a placeholder for a freezer door being open, when I get around to purchasing the appropriate hardware.)

Trigger (in this case) the light does in fact bring up a popup card, but none of the requested styles are applied.

If anyone has any brilliant suggestions, I'd much appreciate it.

Code from my automation script:

id: '1680206256594'
alias: Test Popup for Light
description: Tests Popup if Light Comes On
trigger:

platform: state
entity_id:

light.landing
from: 'off'
to: 'on'
condition: []
action:

service: browser_mod.popup
data:
dismissable: true
autoclose: false
content:
type: custom:popup-card
entity: light.upstairs_alcove
title: ACTION NEEDED
card:
type: markdown
style: |
ha-card {
color: red;
width: 100%;
height: 100%;
background-color: #3C4048;
text-align: center;
padding-top: 0px;
font-size: 30px;
}
content: Alcove Light is On
size: normal
mode: single

Hi did you figure it out?

NR3Y · 2024-01-23T14:54:21Z

Hi Thomas, Sadly, no. Actually, I did (temporarily) abandon the idea and instead used the default notification service, which actually works out a little better in my case. I’m using (at the moment) an old iPad Air as my wall-mounted tablet. In the IOS settings, I set notifications to persist. In the HA automation, I now call a ‘send notification to the iPad companion app’ service with the appropriate message. This nicely pops up a notification on my panel, along with a nice beep as an audible attention-getter, and the message stays there (persistent notification) until I tap on it, where it dutifully disappears. The down-side is that the popup is always at the top of the screen, but I can live with that. Going down the road, I might replace the iPad with a cheap Android tablet for the following reasons: Waking the tablet up from a ‘deep sleep’ remotely might be easier on Android; can’t do that on the iPad I might be able to use the tablet’s camera to automatically wake up the tablet - something iPad doesn’t support Thanks for checking, though. Darrell

…

On Jan 22, 2024, at 10:26 PM, nochlab1 ***@***.***> wrote: Hmmm, I'm having a similar issue (styles not being applied). I have created an automation that throws up a pop-up card when a device changes state. (In this example, a light coming on, but the code is a placeholder for a freezer door being open, when I get around to purchasing the appropriate hardware.) Trigger (in this case) the light does in fact bring up a popup card, but none of the requested styles are applied. If anyone has any brilliant suggestions, I'd much appreciate it. Code from my automation script: id: '1680206256594' alias: Test Popup for Light description: Tests Popup if Light Comes On trigger: platform: state entity_id: light.landing from: 'off' to: 'on' condition: [] action: service: browser_mod.popup data: dismissable: true autoclose: false content: type: custom:popup-card entity: light.upstairs_alcove title: ACTION NEEDED card: type: markdown style: | ha-card { color: red; width: 100%; height: 100%; background-color: #3C4048; text-align: center; padding-top: 0px; font-size: 30px; } content: Alcove Light is On size: normal mode: single Hi did you figure it out? — Reply to this email directly, view it on GitHub <#117 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAO6I2RP3XHUOYHBRQRYRILYP5CZZAVCNFSM4PHBP7UKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJQGUZTCNRYGMZA>. You are receiving this because you commented.

hheimbuerger · 2024-06-12T15:48:47Z

(EDIT: I had added my request here, because it specifically refers to a comment above. But it doesn't really belong on this issue, so I opened a new one for it: #714)

thomasloven mentioned this issue Jul 24, 2020

Popups broken in 0.113 #115

Closed

thomasloven pinned this issue Jul 24, 2020

thomasloven closed this as completed Aug 2, 2020

hheimbuerger mentioned this issue Jun 12, 2024

Request for better popup dialog styling example #714

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

pop ups not applying styles (HA 0.113 and browser mod 1.1.0) #117

pop ups not applying styles (HA 0.113 and browser mod 1.1.0) #117

basesnow commented Jul 24, 2020

thomasloven commented Jul 24, 2020

basesnow commented Jul 24, 2020

ronaldheft commented Jul 24, 2020

theone11 commented Jul 24, 2020 •

edited

Loading

thomasloven commented Jul 24, 2020 •

edited

Loading

thomasloven commented Jul 24, 2020

basesnow commented Jul 25, 2020

thomasloven commented Jul 25, 2020

thomasloven commented Jul 25, 2020

UmbeMont commented Jul 25, 2020 •

edited

Loading

thomasloven commented Jul 25, 2020

UmbeMont commented Jul 27, 2020 •

edited

Loading

thomasloven commented Jul 28, 2020

UmbeMont commented Jul 28, 2020 •

edited

Loading

ASNNetworks commented Aug 2, 2020

Protoncek commented Oct 24, 2021 •

edited

Loading

NR3Y commented Mar 30, 2023

nochlab1 commented Jan 23, 2024

NR3Y commented Jan 23, 2024 via email

hheimbuerger commented Jun 12, 2024 •

edited

Loading

pop ups not applying styles (HA 0.113 and browser mod 1.1.0) #117

pop ups not applying styles (HA 0.113 and browser mod 1.1.0) #117

Comments

basesnow commented Jul 24, 2020

thomasloven commented Jul 24, 2020

basesnow commented Jul 24, 2020

ronaldheft commented Jul 24, 2020

theone11 commented Jul 24, 2020 • edited Loading

thomasloven commented Jul 24, 2020 • edited Loading

thomasloven commented Jul 24, 2020

basesnow commented Jul 25, 2020

thomasloven commented Jul 25, 2020

thomasloven commented Jul 25, 2020

UmbeMont commented Jul 25, 2020 • edited Loading

thomasloven commented Jul 25, 2020

UmbeMont commented Jul 27, 2020 • edited Loading

thomasloven commented Jul 28, 2020

UmbeMont commented Jul 28, 2020 • edited Loading

ASNNetworks commented Aug 2, 2020

Protoncek commented Oct 24, 2021 • edited Loading

NR3Y commented Mar 30, 2023

nochlab1 commented Jan 23, 2024

NR3Y commented Jan 23, 2024 via email

hheimbuerger commented Jun 12, 2024 • edited Loading

theone11 commented Jul 24, 2020 •

edited

Loading

thomasloven commented Jul 24, 2020 •

edited

Loading

UmbeMont commented Jul 25, 2020 •

edited

Loading

UmbeMont commented Jul 27, 2020 •

edited

Loading

UmbeMont commented Jul 28, 2020 •

edited

Loading

Protoncek commented Oct 24, 2021 •

edited

Loading

hheimbuerger commented Jun 12, 2024 •

edited

Loading