Hi, I’m working on a new mobile dashboard using picture-elements, button-card, and state-switch all working well together. However, I noticed that when an element goes beyond the length hardcoded it doesn’t produce scrollbars therefore not allowing me to click on those items. I would prefer not to have hardcoded values and let the card expand and contract based on the space required but I haven’t able to figure out either. Below are screenshots of what it looks like before the items are expanded and afterward.
and this is what it looks like when expanded
As you can see things get cut off. Below is a snip of the bits I’m using to expand the height of the card.
type: 'custom:mod-card'
style: |
ha-card {
background-color: rgba(0,0,0,0);
width: 368px;
height: 892px;
}
card:
type: picture-elements
image: /local/pics/ui/front-yard-house-design-2.jpg
style: |
ha-card {
width: 368px;
height: 892px;
}
Thanks in advance!
Edit - Figured it out, I just put it into its own vertical stack and change the header to its own size now the card flexes when the expanded.
If anyone has a better idea please let me know.