DropDowns Incompatibility with stack-in cards

[sdrapha]

Checklist:

• [x] I updated to the latest version available
• [x] I cleared the cache of my browser

Release with the issue:

Last working release (if known):

Browser and Operating System:

Description of problem:

Starting on HA version 2022.3 The dropdowns don't show correclty if the mini-media-playerlink card is used inside a custom:stack-in-cardlink or a custom:vertical-stack-in-card link

I'll cross post this issue on the other involved custom cards repos, as I don't know what is the root cause for the issue.

Cross posted issues: https://github.com/ofekashery/vertical-stack-in-card/issues/120 https://github.com/kalkih/mini-media-player/issues/631

Javascript errors shown in the web inspector (if applicable):

Additional information:

[mat4444]

Same issue here. The card needs to allow overflow for the dropdown menus.

[guy0nabuffalo]

Also having trouble with this. Input select options do not expand past the card.

[ildar170975]

The custom:stack-in-card is incompatible with the new Material Web Components' dropdown list control. A very simple MWE:

type: custom:stack-in-card
cards:
  - type: entities
    entities:
      - entity: input_select.test_value

The list is clipped inside the stack's area.

Temporarily this may be fixed by applying a overflow: visible !important; CSS style to the stack by card-mod.

[sdrapha]

Thanks for the temporary work-around @ildar170975, it works.

Posting it here in a more clear format on where to use it, to make it easier for more people to use. Since card-mod css structure is not the most intuitive thing on earth.

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      overflow: visible !important;
    }
cards:
  - type: custom:mini-media-player
    lorem: ipsum.....

[ildar170975]

For the record: This overflow: hidden may also cause clipping for a history-graph: described here

type: custom:stack-in-card
cards:
  - type: history-graph
    entities:
      - sun.sun

[ildar170975]

And now I suggest this mod:

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      overflow: visible !important;
    }
    ha-card > div {
      overflow-x: clip;
    }
cards:
  - type: history-graph
    entities:
      - sun.sun
  - type: custom:hui-element
    row_type: section
  - type: entities
    entities:
      - input_select.test_value

which prevents overflowing by X & allows it by Y. But clip value may not work in some old browsers.

[LDprg]

Same issue here workarounds work perfectly. Maybe someone should make a pr with an actual fix.

[sdrapha]

Same issue here workarounds work perfectly. Maybe someone should make a pr with an actual fix.

I made a PR already, almost 2 years ago, never got merged. It's still there ready to go, just waiting for the repo owner. Maybe the card is not being maintained anymore. idk.

[LDprg]

@RomRider Is it possible to merge that pr, so that problem gets resolved?

[ildar170975]

I made a PR already

This PR does not handle some cases, already suggested you corrections.

[sdrapha]

@ildar170975 I'll update it with your suggestion 👍

[ildar170975]

Very good. The only thing that bothers me - it may not work properly on some old browsers.

[sdrapha]

@ildar170975 What is your goal trying to limit overflow in X only, does that solves any particular issue? I've never had a problem allowing overflow to all directions... so, I'm curious.

[ildar170975]

Compare

The 1st card has no overflow-x: clip style.

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      overflow: visible !important;
    }
    ha-card > div {
      overflow-x: clip;
    }
cards:
  - type: history-graph
    entities:
      - sun.sun
  - type: custom:hui-element
    row_type: section
  - type: entities
    entities:
      - input_select.test_value