lovelace-layout-card icon indicating copy to clipboard operation
lovelace-layout-card copied to clipboard

layout_card mediaquery not activating within browser_mod popup

Open MadMaxMcKinney opened this issue 3 years ago • 2 comments

I have a simple layout_card that I've used in other parts of my dashboard, shown below:

    type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: repeat(auto-fill, minmax(115px, 160px))
      grid-template-rows: auto
      grid-gap: 8px
      mediaquery:
      "(max-width: 450px)":
        grid-template-columns: 1fr 1fr 1fr

However when I use this card inside a browser_mod popup the mediaquery doesn't activate. I am also using decluttering_card to template many of my cards, which is what I'm suspecting is causing this.

Here's my trigger for the popup as well:

      - tap_action: 
          action: fire-dom-event
          browser_mod:
            command: popup
            title: Lights
            large: true
            style: |
              .content {
                margin: 0 !important;
              }
            card:
              !include /config/lovelace/views/subviews/subview_popup_lights.yaml

Any other workarounds or thoughts?

MadMaxMcKinney avatar Sep 02 '21 01:09 MadMaxMcKinney

Mediaquery relates to the screen size, not the card or popup.

thomasloven avatar Feb 21 '22 20:02 thomasloven

Mediaquery relates to the screen size, not the card or popup.

I understand. Using these components the media query wasn't triggering at that screen size. IE the subview card being passed into the pop-up wasn't activating it's media query at the defined screen size.

I've moved on to other solutions but that original comment still stands. I think the issue is related to the decluttering-card but I'm not sure.

I've mostly moved onto using templates within custom-button-card. You can close this if you'd like.

MadMaxMcKinney avatar Feb 21 '22 21:02 MadMaxMcKinney