Absolute Positioning Issue

[matiasoberg]

Love the Wallpanel.:) Great job @j-a-n

I'm really struggling to get absolute positioning of cards to work though. Might need to brush up on my CSS skills I recon. But anyways... Currently at my wits end. I'm able to position the cards where I want but controls aren't working.

Tried a couple of different approaches.

Try: No 1 Idea: Haven't found that it's supported but might work. Result: Position is correct and everything looks as expected. But the mini-media-player card's controls arn't working. A click on any controls just interrupts the screensaver and brings me back to normal dashboard.

wallpanel:
  enabled: false
  hide_toolbar: false
  hide_sidebar: true
  fullscreen: true
  show_progress_bar: true
  card_interaction: true
  touch_zone_size_next_image: 0
  touch_zone_size_previous_image: 0
  cards:
    - type: conditional
      wp_style:
        position: absolute
        width: 400px
        bottom: 100px
        right: 100px
      conditions:
        - condition: state
          entity: sensor.whatisplaying
          state: playing_spotify
      card:
        type: custom:mini-media-player
        entity: media_player.office_linkplay
        artwork: full-cover
        info: scroll
        toggle_power: false
        scale: 1
        hide:
          name: true
          icon: true
          info: false
          source: true
          sound_mode: true
          volume: true
          controls: false
          power: true
          runtime: false
          runtime_remaining: true
          artwork_border: true
          progress: false

Try: No 2 Idea: Using mod-card instead. Result: Position is correct and everything looks as expected. But the mini-media-player card's controls arn't working. A click on any controls just interrupts the screensaver and brings me back to normal dashboard. So same as No 1.

wallpanel:
  enabled: false
  hide_toolbar: false
  hide_sidebar: true
  fullscreen: true
  show_progress_bar: true
  card_interaction: true
  touch_zone_size_next_image: 0
  touch_zone_size_previous_image: 0
  cards:
    - type: custom:mod-card
      card_mod:
        style: |
          ha-card {
          position: absolute;
          right: 100px;
          bottom: 100px;
          }
      card:
        type: conditional
        conditions:
          - condition: state
            entity: sensor.whatisplaying
            state: playing_spotify
        card:
          type: custom:mini-media-player
          entity: media_player.office_linkplay
          artwork: full-cover
          info: scroll
          toggle_power: false
          scale: 1
          hide:
            name: true
            icon: true
            info: false
            source: true
            sound_mode: true
            volume: true
            controls: false
            power: true
            runtime: false
            runtime_remaining: true
            artwork_border: true

So my conclusion is that either absolute positioning works but then "card_interaction" isn't. Or I'm just too thick to figure it out. Any help would be appreciated!

Cheers!

[matiasoberg]

Done a bit more experimenting.

Try: No 3 Idea: Set width and height on "wallpanel-screensaver-info-box-content" but still use previous "No 1"-approach for card placements. Result: Position is correct and everything looks as expected. Now the "mini-media-player" controls works as expected but clicking the area now contained within the width and height of "wallpanel-screensaver-info-box-content" doesn't exit the screen saver. Instead I have to click outside of "wallpanel-screensaver-info-box-content" to exit.

wallpanel:
  style:
    wallpanel-screensaver-info-box-content:
      width: 1200px
      height: 1000px
  debug: false
  enabled: false
  hide_toolbar: false
  hide_sidebar: true
  fullscreen: true
  show_progress_bar: true
  card_interaction: true
  touch_zone_size_next_image: 0
  touch_zone_size_previous_image: 0
  cards:
    - type: conditional
      wp_style:
        position: absolute
        width: 400px
        bottom: 100px
        right: 100px
      conditions:
        - condition: state
          entity: sensor.whatisplaying
          state: playing_spotify
      card:
        type: custom:mini-media-player
        entity: media_player.office_linkplay
        artwork: full-cover
        info: scroll
        toggle_power: false
        scale: 2
        hide:
          name: true
          icon: true
          info: false
          source: true
          sound_mode: true
          volume: true
          controls: false
          power: true
          runtime: false
          runtime_remaining: true
          artwork_border: true

So still struggling to understand why this happens but getting closer to a solution it seems.

[j-a-n]

Thanks @matiasoberg ! Just released version 4.23.2 which should fix the card interaction issue with absolut positioned cards.

[matiasoberg]

Wooohoo! Just updated and it solved my problem instantly. Thanks a lot @j-a-n . Excellent work! 🥇 :)