2.1.0: folds auto open when scroll mod is used

[Mariusthvdb]

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 code

Error 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:

• [X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
• [X] Have made sure I am using the latest version of the plugin.
• [X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
• [X] 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.

[ildar170975]

I confirm the issue. Win10x64, Chrome.

[ildar170975]

@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;
        }

[Mariusthvdb]

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.

[ildar170975]

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.

[Mariusthvdb]

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 ;-)

[ildar170975]

I got rid of card-mods for disabling clipping for a head & items:

• dividers were clipped (in head & items)
• markdown in items was clipped

[Mariusthvdb]

I see,. thanks. Didn't have anything in place for that, so that's why I didnt notice the improvement there.

[thomasloven]

Try applying the same styles to #measure instead.

card_mod:
  style: |
    #measure {
      max-height: 300px;
      overflow-x: hidden;
      overflow-y: scroll;
    }

[Mariusthvdb]

can confirm that to work, and indeed the overflow-x: hidden is necessary (wasnt before). Added the no_animation: truebecause 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

[ildar170975]

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.

[Mariusthvdb]

could you please add a screenshot of that?

[ildar170975]

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 (https://github.com/thomasloven/lovelace-fold-entity-row/issues/195) occurred on November 2021 and disappeared after some of the latest releases (January 2022).

[Mariusthvdb]

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...

[ildar170975]

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: 1) Divider is clipped (clearly visible on the left side); 2) 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)))

[Mariusthvdb]

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

[Mariusthvdb]

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..

[thomasloven]

It's probably this one changing some priorities https://github.com/home-assistant/frontend/pull/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.

[Mariusthvdb]

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 https://github.com/thomasloven/lovelace-fold-entity-row/issues/207#issuecomment-1025650403 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.

[Mariusthvdb]

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