Multiple state switch cards overlay each other

[sgofferj]

I have a whole bunch of state switch cards to make different cards appear and disappear based on the "system mode". The first one is an input select. I noticed that the selection for the input select is covered by the second state switch card.

    cards:
      - type: custom:state-switch
        entity: input_select.mode
        states:
          Morning:
            type: entities
            entities:
              - input_select.mode
          Day:
            type: entities
            entities:
              - input_select.mode
          Daylight:
            type: entities
            entities:
              - input_select.mode
          Evening:
            type: entities
            entities:
              - input_select.mode
          Go to bed:
            type: entities
            entities:
              - input_select.mode
          Night:
            type: entities
            entities:
              - input_select.mode
      - type: custom:state-switch
        entity: input_select.mode
        states:
          Morning:
            type: custom:sun-card
          Day:
            type: custom:sun-card
          Daylight:
            type: custom:sun-card
      - type: custom:state-switch
        entity: input_select.mode
        states:
          Morning:
            type: media-control
            entity: media_player.living_room
      - type: custom:state-switch
        entity: input_select.mode
        states:
          Evening:
            type: media-control
            entity: media_player.living_room_tv
          TV:
            type: media-control
            entity: media_player.living_room_tv
[...]

[thomasloven]

Please try release 1.9.0

[sgofferj]

Updated now. I'll set it up again and report back (I deleted the setup because of the issue)

[sgofferj]

Sorry, problem persists.

[thomasloven]

Please try release 1.9.3

[sgofferj]

Will do. May take a few days.

[satyambaba]

Please try release 1.9.3

I am facing the same overlay issue. This issue is still there in release 1.9.3, I am on HA core-2022.3

[thomasloven]

That does not at all look like two cards overlapping each other. Also please provide information about your configuration and browser.

[satyambaba]

That does not at all look like two cards overlapping each other. Also please provide information about your configuration and browser.

@thomasloven, It didn't look like an overlay as there was no card below that. Please refer to the below screenshot. I am using Chrome browser (Version 98.0.4758.102 (Official Build) (64-bit)).

The yaml for that card is -

type: custom:state-switch
entity: media_player.bedroom_display
states:
  playing:
    type: custom:mini-media-player
    volume_stateless: false
    artwork: full-cover
    entity: media_player.bedroom_display
    sound_mode: full
    source: full
    group: true
    info: scroll
  paused:
    type: custom:mini-media-player
    volume_stateless: false
    artwork: material
    entity: media_player.bedroom_display
    sound_mode: full
    source: full
    group: true
    info: scroll

The moment I remove one state value (either "playing" or "paused"), I don't see the overlay.

[jazzyisj]

I have a similar issue, also with the mini-media-player (v1.16 - also tested with v1.15) I thought it may be the group option of the mini-media player but I have tested that also and it is not. Chrome Version 98.0.4758.102 (Official Build) (64-bit)

This is v1.9.0, cards are displaying correctly.

This is v1.9.1+ (incl 1.9.3). It looks like it's displaying both states but overlapping the cards?

With the group option set to false.

type: custom:state-switch
entity: template
template: >
  {{ 'on' if states('sensor.all_speakers')|lower
      not in ['idle','off','unknown','unavailable','none'] else 'off' }}
states:
  'off':
    type: custom:mini-media-player
    entity: media_player.all_speakers
    name: 'All Speakers'
    icon: mdi:speaker-multiple
    group: true
    toggle_power: false
    hide: !include /config/lovelace/media_player/include/mini_media_player_off.yaml
  'on':
    type: custom:mini-media-player
    entity: media_player.all_speakers
    name: 'All Speakers'
    icon: mdi:speaker-multiple
    group: true
    toggle_power: false
    hide: !include /config/lovelace/media_player/include/mini_media_player_on.yaml
    artwork: full-cover
    source: full
    info: scroll

I get a lot of this in the browser console. Possibly related?

Uncaught (in promise) DOMException: Failed to execute 'querySelector' on 'DocumentFragment': '#3m820am24-menu' is not a valid selector.
    at ec.firstUpdated (http://homeassistant.local:8123/hacsfiles/mini-media-player/mini-media-player-bundle.js:1:153520)
    at ec.performUpdate (http://homeassistant.local:8123/hacsfiles/mini-media-player/mini-media-player-bundle.js:1:131322)
    at http://homeassistant.local:8123/hacsfiles/mini-media-player/mini-media-player-bundle.js:1:130872
    at Generator.next (<anonymous>)
    at cb (http://homeassistant.local:8123/hacsfiles/mini-media-player/mini-media-player-bundle.js:1:48215)
    at f (http://homeassistant.local:8123/hacsfiles/mini-media-player/mini-media-player-bundle.js:1:48399)

[satyambaba]

Just highlighting, this issue still persists after HA v2022.4.1, so I guess this is not OS related. I use state switch heavily, so is there any workaround at this moment while we wait for the resolution. Have also raised this issue on mini media player github. https://github.com/kalkih/mini-media-player/issues/641

[Jaykurb]

I have a similar issue. The drop-down menu is constantly shown for one of my entities even when it's not selected and this overlaps other entities. Same issue with multiple browsers and HA app.

Home Assistant Core 2022.5.5 Home Assistant Supervisor 2022.05.3 Home Assistant OS 8.1 Kernel version 5.15.41 Agent version 1.2.1

mini media player release V1.16.4

The list that is overlapping is from the top entity 'media_player.denon_avr_x4300h'

entities:
  - artwork: cover
    entity: media_player.denon_avr_x4300h
    group: true
    hide:
      controls: true
      power_state: false
    icon: mdi:monitor-speaker
    source: icon
    type: custom:mini-media-player
  - entity: media_player.avr_zone_2
    group: true
    hide:
      controls: true
      power_state: false
    icon: mdi:monitor-speaker
    source: icon
    type: custom:mini-media-player
  - entity: media_player.heos_amp
    group: true
    hide:
      controls: true
      power_state: false
    type: custom:mini-media-player
  - entity: media_player.epson
  - entity: media_player.entertainment_room
  - entity: media_player.dinning_room_tv
  - entity: media_player.main_bed_room_tv
    group: true
    hide:
      controls: true
      power_state: true
type: entities
title: Video Players

[thomasloven]

The linux kernel version of the system running your backend is actually not at all as useful as for example information about the configuration for that card and what the custom entity rows you're using are.

[Jaykurb]

Apologies, I have updated the post above.

[thomasloven]

Should be fixed in 1.9.4

[ildar170975]

In my setup a similar issue seems to be solved, but update 1.9.4 broke box-shadows((( https://github.com/thomasloven/lovelace-state-switch/issues/67

[thomasloven]

I accidentally included one line too much from my experiments. Try 1.9.5.

[ildar170975]

Thank you, Thomas, box-shadows seem to be fixed.

[Jaykurb]

Sorry for the dumb question but where do I update to 1.9.5?

[thomasloven]

HACS or https://github.com/thomasloven/lovelace-state-switch/releases