Unable to mod buttons and dropdowns simultaneously

[kaizersoje]

My Home Assistant version: 2021.3.4

My lovelace configuration method (GUI or yaml): YAML

What I am doing: I am trying to mod the buttons and dropdown in the shortcuts section of a custom:mini-media-player card. I am able to mod the buttons and dropdown values separately but not together.

What I expected to happen: I expect the buttons and dropdown values to get modded simultaneously.

What happened instead:

- type: custom:mini-media-player
  card_mod:
    style: |
      .mmp-player {
        padding: 7px !important;
      }
      .mmp-player__adds {
        margin-left: calc(var(--mmp-unit) * 0.2) !important;
      }
  entity: media_player.nesthub
  name: TEST BUTTON
  artwork: cover
  icon: si:youtubemusic
  hide:
    # shuffle: false
    icon_state: false
    info: true
  shortcuts:
    columns: 3
    column_height: 30
    buttons:
      - type: script
        name: Song1
        id: script.ytube_play_video_atpos1
      - type: script
        name: Song2
        id: script.ytube_play_video_atpos2
      - type: script
        name: Song3
        id: script.ytube_play_video_atpos3

    list:
      - type: script
        name: Song4
        id: script.ytube_play_video_atpos4
      - type: script
        name: Song5
        id: script.ytube_play_video_atpos5
      - type: script
        name: Song6
        id: script.ytube_play_video_atpos6

- type: custom:mini-media-player
  card_mod:
    style:
      mmp-shortcuts$ mmp-dropdown$: |
        paper-item {
          line-height: 20px !important;
          min-height: 30px !important;
        }
        .mmp-dropdown__item__label {
          font-size: 11pt !important;
          color: Silver !important;
        }
  entity: media_player.nesthub
  name: TEST DROPDOWN
  artwork: cover
  icon: si:youtubemusic
  hide:
    # shuffle: false
    icon_state: false
    info: true
  shortcuts:
    columns: 3
    column_height: 30
    buttons:
      - type: script
        name: Song1
        id: script.ytube_play_video_atpos1
      - type: script
        name: Song2
        id: script.ytube_play_video_atpos2
      - type: script
        name: Song3
        id: script.ytube_play_video_atpos3

    list:
      - type: script
        name: Song4
        id: script.ytube_play_video_atpos4
      - type: script
        name: Song5
        id: script.ytube_play_video_atpos5
      - type: script
        name: Song6
        id: script.ytube_play_video_atpos6

- type: custom:mini-media-player
  card_mod:
    style: |
      .mmp-player {
        padding: 7px !important;
      }
      .mmp-player__adds {
        margin-left: calc(var(--mmp-unit) * 0.2) !important;
      }
    style:
      mmp-shortcuts$ mmp-dropdown$: |
        paper-item {
          line-height: 20px !important;
          min-height: 30px !important;
        }
        .mmp-dropdown__item__label {
          font-size: 11pt !important;
          color: Silver !important;
        }
  entity: media_player.nesthub
  name: TEST BOTH
  artwork: cover
  icon: si:youtubemusic
  hide:
    # shuffle: false
    icon_state: false
    info: true
  shortcuts:
    columns: 3
    column_height: 30
    buttons:
      - type: script
        name: Song1
        id: script.ytube_play_video_atpos1
      - type: script
        name: Song2
        id: script.ytube_play_video_atpos2
      - type: script
        name: Song3
        id: script.ytube_play_video_atpos3

    list:
      - type: script
        name: Song4
        id: script.ytube_play_video_atpos4
      - type: script
        name: Song5
        id: script.ytube_play_video_atpos5
      - type: script
        name: Song6
        id: script.ytube_play_video_atpos6

Minimal steps to reproduce: I have pasted the code above.

# The least amount of code possible to reproduce my error

# End of code

Error messages from the browser console:

---

By putting an X in the boxes ([]) below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [x] Have made sure I am using the latest version of the plugin.

• [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[KTibow]

Help should go in the card-mod forums. Anyway, here's how:

  card_mod:
    style:
      .: |
        .mmp-player {
          padding: 7px !important;
        }
        .mmp-player__adds {
          margin-left: calc(var(--mmp-unit) * 0.2) !important;
        }
      mmp-shortcuts$ mmp-dropdown$: |
        paper-item {
          line-height: 20px !important;
          min-height: 30px !important;
        }
        .mmp-dropdown__item__label {
          font-size: 11pt !important;
          color: Silver !important;
        }

I'm pretty sure for some reason @thomasloven removed this from the docs.

[kaizersoje]

Help should go in the card-mod forums. Anyway, here's how:

  card_mod:
    style:
      .: |
        .mmp-player {
          padding: 7px !important;
        }
        .mmp-player__adds {
          margin-left: calc(var(--mmp-unit) * 0.2) !important;
        }
      mmp-shortcuts$ mmp-dropdown$: |
        paper-item {
          line-height: 20px !important;
          min-height: 30px !important;
        }
        .mmp-dropdown__item__label {
          font-size: 11pt !important;
          color: Silver !important;
        }

I'm pretty sure for some reason @thomasloven removed this from the docs.

Yay!! That worked. I wonder why it was removed from the docs, if it was present previously. Thx @KTibow :)