DropDowns Incompatibility with stack-in cards

[sdrapha]

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/kalkih/mini-media-player/issues/631 https://github.com/custom-cards/stack-in-card/issues/40

[LaBoss]

Same where

https://community.home-assistant.io/t/problem-with-input-select/404179/

[therealhalifax]

same for me. I think it came with the HA 2022.03 update. something changed in the lovelace system.

I replaced custom:vertical-stack-in-card with vertical-stack and the issue is gone. so the root cause seems to be in the custom vertical-stack-in

[Piti8576]

Same Problem. Home Assistant 2022.3.7

[tm24fan8]

Same problem as well, my dropdowns disappear behind the next card. They work fine in a normal vertical stack.

[ScottG489]

I think the problem may be that generally any kind of overflow gets hidden.

I've seen this problem as well with other things such as when adjusting input_number sliders. The indicator showing what number you've selected that pops up above the slider will get cut off slightly if it's at the top of the card.

[Kolia56]

Same with me. So I fallbacked to regular vertical card. Running 2022.10 I used this fix given in another post (need card_mod that I already had installed)

card_mod: style: | ha-card { overflow: visible !important; }

[ScottG489]

Would the fix for this then to have that styling built in to the card?

It looks like we even explicitly hide overflow: https://github.com/ofekashery/vertical-stack-in-card/blob/master/vertical-stack-in-card.js#L41

Looks like it was done in this commit: d0cb3bfcaa3f9a45f0b1b5f62cf9259d09deda23

Looking at the commit and issues it fixed (#70 and #81) it's still not clear to me why we needed to hide overflow though.

@ofekashery Since you made that change, care to weigh in? Would it be as simple as removing card.style.overflow = 'hidden'; or is that styling necessary to fix other issues?

[sdrapha]

I made a PR to fix this issue, half an year ago already, is there any concern blocking it from being merged @ofekashery? Apreciate your thoughts. I'm using my modified version since then, flawless, couldn't find any collaterel effect, it just works.

[jbtrystram]

@sdrapha thanks for finding the issue. I tried to manually edit the line in www/community/vertical-stack-in-card/vertical-stack-in-card.js but it does not work. Do I need to remove it from HACS and download your fork ? (if so, a rebase would be awesome)

[sdrapha]

@jbtrystram , if you manually edit the .js file. you probably need to delete the .gz file. Also, don't forget to clear your browsers cache. It should work.

[jbtrystram]

@sdrapha thanks for your answer. It appears to work only for one of my cards, but not the others. Also if I delete everything in the JS file my dashboards stops working, but when entering the "edit" widget it is still displayed properly. So there is some cache messing with this.