2.1.0: folds auto open when scroll mod is used
Mariusthvdb opened this issue · 19 comments
My Home Assistant version: 2022.3.0.dev20220130
Fold-entity-row version (FROM BROWSER CONSOLE): 2.1.0
What I am doing:
adding a card_mod to have the entities in a fold use a scroll bar, and this worked beautifully up to 20.0.14
What I expected to happen:
folds remain closed until click
What happened instead:
folds auto open
we can click the fold, and see the icon change, the entities list itself though is not changing. Also the scroll isnt available anymore, and the list is stuck at max-height.
Minimal steps to reproduce:
# The least amount of code possible to reproduce my error
- type: entities
entities:
- type: custom:fold-entity-row
card_mod:
style: |
div#items {
overflow-y: scroll;
max-height: 400px !important;
}
head:
type: section
label: Inside
# End of codeError messages from the browser console:
No errors
bringing back 20012 results in:
By putting an X in the boxes ([X]) below, I indicate that I:
- Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
- Have made sure I am using the latest version of the plugin.
- Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
- Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
I confirm the issue.
Win10x64, Chrome.
@Mariusthvdb temporarily you may use this solution (causes some weird animation unfortunately):
card_mod:
style: |
div#items:not(.clip) {
overflow-y: scroll !important;
max-height: 300px !important;
}
I'll check it out, but for the time, remain at 20.0.12 with my edits, which is rock solid. bth Ive never seen the need for the animation option/change, which I feel has been causing issues ever since it was introduced.
I like the new card - with the latest version I got rid of using card-mod in many places.
The problem with a scrollbar is the only problem I faced so far...
In my setup there are only few scrollbars, I may wait for the next version with that temporal solution.
which card_mods did you get rid of now? what was the change in the regard? Asking because I still use them all, and maybe wouldn't need to ;-)
I got rid of card-mods for disabling clipping for a head & items:
- dividers were clipped (in head & items)
- markdown in items was clipped
I see,. thanks. Didn't have anything in place for that, so that's why I didnt notice the improvement there.
Try applying the same styles to #measure instead.
card_mod:
style: |
#measure {
max-height: 300px;
overflow-x: hidden;
overflow-y: scroll;
}can confirm that to work, and indeed the overflow-x: hidden is necessary (wasnt before).
Added the no_animation: true because otherwise it isnt snappy.
- type: custom:fold-entity-row
no_animation: true
card_mod:
style: |
#measure {
max-height: 300px;
overflow-x: hidden;
overflow-y: scroll;
}
# div#items {
# overflow-y: scroll;
# max-height: 400px !important;
# }
head:
type: section
label: Inside
card_mod: &label
style: |
.label {
margin-left: 0px;
}
padding: 0
The only issue here is about "overflow-x: hidden" - causes clipping for sections (((
This is strange - earlier I manages to use only "overflow-y: scroll", it did not cause appearing a horizontal scrollbar.
could you please add a screenshot of that?
type: entities
title: Problem 126
entities:
- type: custom:fold-entity-row
head:
type: section
label: Inside
open: true
padding: 0
no_animation: true
entities:
- sun.sun
- sun.sun
- sun.sun
- type: section
- sun.sun
- sun.sun
- sun.sun
- type: custom:hui-element
card_type: markdown
content: XXXXXXXXXXXXXXXXX
- sun.sun
- sun.sun
- sun.sun
card_mod:
style: |
div#measure {
overflow-y: scroll;
overflow-x: hidden;
max-height: 300px;
}
Divider & markdown are clipped.
That clipping (#195) occurred on November 2021 and disappeared after some of the latest releases (January 2022).
and the issue is? Sorry, I must be getting daft, but that looks ok?
or do you mean the scrollbar is over the right side of the markdown and divider?
no you dont.. ;-)
if you mean the divider not touching the card borders, I see this too, on an unmodded fold (watch the divider below Per cover closely)
- type: custom:fold-entity-row
head:
type: section
label: Per cover
card_mod: &label
style: |
.label {
margin-left: 0px;
}
padding: 0
entities:
- type: custom:fold-entity-row
head:
type: section
label: Screen keuken
card_mod: *label
padding: 0
entities:
- button.screen_keuken_my_position
- entity: number.screen_keuken_my_position
name: Set My position
- sensor.screen_keuken_priority_lock_originator
- sensor.screen_keuken_priority_lock_timer
- entity: sensor.screen_keuken_discrete_rssi_level
name: Discrete
- entity: sensor.screen_keuken_rssi_level
name: Rssi
- type: custom:decluttering-card
template: fold_cover
variables:
- label: Slaapkamer
- id: slaapkamer
if thats still not what you mean, I am lost...
Here how it looks with a new card and w/o styles for crollbar (with a less number of rows):
With styles for scrollbar (same as the pic from my prev post):
The differences are:
- Divider is clipped (clearly visible on the left side);
- Markdown left & right edges are clipped.
if you mean the divider not touching the card borders, I see this too, on an unmodded fold (watch the divider below Per cover closely)
That was on some previous releases. Not it is not clipped.
Well, this clipping is a VERY small issue for ME.
I think that I may use all my THREE cards with scrollbar without internal sections & markdowns - so, I will not see these clippings)))
yep. see it now. Its a thing I always fight with setting margins. if you eg embed a Map, and try to have it fill the whole fold up to the outer card borders, and not only under the fold itself. widening the margins of that fold doesnt solve the problem, it merely widens the Map, but it is clipped as you see. Again we then need to mod the items.
- type: custom:fold-entity-row
head:
type: section
label: on Map
card_mod:
style: |
.label {
margin-left: 0px;
}
padding: 0
card_mod:
style: |
div#items {
margin: 16px -16px -16px -16px;
}
is needed in those cases too.
EDIT
had a user error, deleted here to prevent mixups.., sorry for that
what I do see now is that the mod I use for the label (see post above) is no longer working in Chrome browser on Mac :
where Safari/Mac still shows as should:
I did just update to todays dev20220131 but dont think that causes this. all in all, its a difficult beast to tame.
Should we try another card_mod on the label too?
check inspector:
Chrome:
Safari:
I am officially flabbergasted...
right above the in Inspector:
and if I deselect the margin-left there, the Label shifts left, as I desire.
what to do? there's no margin-left in the resource, so I cant hack it either..
It's probably this one changing some priorities home-assistant/frontend#11481.
Since lit is made by google it often uses shortcuts that improve performance in chrome specifically.
You need a more specific selector or an !important.
thanks Thomas, Ill check that (!important), because I wouldn't know a more specific selector....
I believe I found a way to hack your resource after all, by adding margin-left: -8px :
#head {
display: flex;
align-items: center;
--toggle-icon-width: 24px;
margin-right: -8px;
margin-left: -8px;
}
though I hate to do that, if it is safe and reliable, it is so much easier to do and global...
so for the record: hacking the margin-left: -8px in the resource, replaces the
card_mod:
style: |
.label {
margin-left: 0px;
}
keeping both moves the Safari Label even further to the left ;-) which is ugly, but good to know:
should I close now, since the original issue has been solved by your #207 (comment) or stay open for Ildar's clipping.
update
I did quickly test the !important on the Label, but that doesnt work.
And, bummer, see that my hack causes the divider to go beyond the card border with 8px... still no solution.
closing, as 2.2.0 also fixes the dividers going out of the box
Chrome still doesnt respond to the
card_mod:
style: |
.label {
margin-left: 0px;
}
but that's another issue