north hawk
Basically, I'm looking to set a maximum card height. By default, the card expands indefinitely as items are added to the list (regardless of the layout settings). I'd like to limit the height so after 6 items, the list becomes scrollable. Is this possible with card mod or otherwise? I didn't see any mention of this card in this thread (but admittedly I'm very very new to card mod):
maybe this is just a bug, the card goes nuts with any grid options applied to it.
unique sky
I did some experimenting with card_mod and the To Do card. Nothing great but I was starting to get some stuff figured out. I want say I was able to limit the height and make it scrollable. I'll post what I have when I get home from work. (My Lab dashboard doesn't play nice on my phone; there's a bunch of craziness going on with some of the stuff I've made.)
north hawk
FWIW, the behavior I’m seeing has been documented as a bug on the front end GitHub, no one has grabbed the issue though.
radiant trench
From what I understand sections dashboard was only really heavily tested with tile card and maybe a few others, and for all the rest there's been little effort to make them work with the different height layout options.
unique sky
The following are just some random stuff that I was playing with. You can pick and choose what you want. Also, there's two examples that use different syntax of card-mod. I hadn't gotten around to combining them (mainly because I have difficulty understanding it), but I can probably get it figured out if you need parts from both examples.
type: todo-list
entity: todo.demo
card_mod:
style: |
ha-card {
font-size: 12px;
background-color: transparent;
border-style: outset;
border-left: none;
border-top: none;
border-color: white;
border-width: 5px;
max-height: 300px;
overflow-y: scroll;
}
div.addRow {
background-color: black;
}
type: todo-list
entity: todo.demo
title: Card_mod Test
card_mod:
style:
.: |
ha-card.type-todo-list div.header {
display: true;
background-color: green;
margin-top: -30px;
margin-bottom: -15px;
padding-bottom: 0px
}
ha-card.type-todo-list .addRow {
display: none;
}
ha-card.type-todo-list div.divider {
display: true;
}
```EDIT: Fixed a typo in the margin-bottom that reduces the spacing between the bottom of the green section and the item below it. (Not shown in the screenshot.)
north hawk
Ended up going with this, which worked out perfectly.
card_mod:
style: |
ha-card {
background-color: transparent;
max-height: 600px;
overflow-y: scroll;
}
div.addRow {
background-color: transparent;
}
Thanks (again) for helping figure out cardmod, parts of it are starting to click.
north hawk
for the list reorder?
radiant trench
Yeah that's one of them, I guess there are two overflow menus
north hawk
radiant trench
I guess it works if it opens left, if it tries to open to the right I think it gets cutoff.
Depending on screen width
north hawk
huh. It always opens to the left for me regardless of device or screen
radiant trench
Like that:
radiant trench
Do you have room to the right?
north hawk
no
radiant trench
that's why
north hawk
oh
)