Open sdrapha opened 2 years ago
Same issue here.
The card needs to allow overflow for the dropdown menus.
Also having trouble with this. Input select options do not expand past the card.
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
.
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.....
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
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.
Same issue here workarounds work perfectly. Maybe someone should make a pr with an actual fix.
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.
@RomRider Is it possible to merge that pr, so that problem gets resolved?
I made a PR already
This PR does not handle some cases, already suggested you corrections.
@ildar170975 I'll update it with your suggestion 👍
Very good. The only thing that bothers me - it may not work properly on some old browsers.
@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.
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
Checklist:
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-player
link card is used inside acustom:stack-in-card
link or acustom:vertical-stack-in-card
linkI'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: