last entity in list is clipped

[Mariusthvdb]

HA 2021.11.3 Fold-entity-row 20.0.12

but there's 1 thing happening now: on folds with the entities listed verbosely, the bottom entity is not getting all the vertical space it should and is clipped. With a simple icon/entity/state all on 1 line that is diffult to see (though noticeably less height is displayed below the entity and above the next fold):

but when using entity_picture,

yaml:

  - type: custom:fold-entity-row
    head:
      type: section
      label: Legacy
    padding: 0
    entities:
      - device_tracker.znorra_oud_app
      - device_tracker.telefoon_app

or secondary_info

or double lined unit, it becomes clear immediately:

yaml for this is plain:

  - type: custom:fold-entity-row
    head:
      type: section
      label: Details
    padding: 0
    entities:
      - entity: sensor.family_home
        secondary_info: last-changed
      - entity: group.family
        secondary_info: last-changed
      - type: divider
      - entity: binary_sensor.daughters_home
        secondary_info: last-changed
      - etc etc
      - type: custom:slider-entity-row
        entity: input_number.presence_timer

this doesnt happen when using auto-entities in the fold..

Originally posted by @Mariusthvdb in https://github.com/thomasloven/lovelace-fold-entity-row/issues/191#issuecomment-974642411

[Mariusthvdb]

Currently happening on 2022.1.0dev

I've tried to add a margin to the div#items with:

    card_mod:
      style: |
        div#items {
          margin: 0px 0px 16px 0px;
        }

but as you can see that is indeed applied, and still the last entity is clipped:

its really a silly, but very nasty problem:

on a plain:

  - type: custom:fold-entity-row
    head:
      type: section
      label: Theme automations
    padding: 0
    entities:
      - entity: automation.sun_based_theme_change
        secondary_info: last-triggered
      - entity: automation.change_current_theme
        secondary_info: last-triggered
      - entity: script.reload_themes
        action_name: Reload themes
        secondary_info: last-triggered

[Mariusthvdb]

seems this is a Safari thing....

In Chrome the issue isnt showing (nor is it in Firefox).

btw, I did play around with https://github.com/thomasloven/lovelace-fold-entity-row/blob/f7870a2616659b408a3616665f2d7e05882655a3/src/main.ts#L375 but that doesnt really do anything in Safari. In Chrome it actually adds to the whitespace after the last child, but that is not is needed ofc..

So still happening on 2022.1.0.dev20211215

[Mariusthvdb]

sorry bout that, wrong button pressed

[Mariusthvdb]

downgrade to 20011 fixes the issue right away, so I figured it might be the added

      #measure > *:last-child {
        margin-bottom: 0;
      }

of the later version. So I commented that in the latest resource, but unfortunately that alone doesn't fix it. So for now, my solution is to install 20011 and hope not to see any other glitches you fixed in the later versions.

Hope this will give you leads on how to fix it in a patch version, thanks!

btw, also add a line in the #head{}to use:

        margin-left: -8px; /* added this line to move header a bit left */

and now the fold headers look better placed again. Don't want to PR this, since I am not sure if you feel this is ok or not. For now consider it a personal preference

Update nvm the margin-left: -8px. it makes the divider go out of the card too.... so thats not good. Need to position (move left 8px) the header in another way..

[thomasloven]

Please try 20.0.13

[Mariusthvdb]

thanks! seems the last item is no longer clipped, but the slide out is really odd. entities 'shine through' while opening. Folding in has the reversed effect, entities remain visible briefly while the card has been folded in

I had commented the line

        /*transition: max-height 0.2s ease-in-out;*/

in the former release, so to make the fold react more swiftly, and tried that now too, but that doesnt really help the visual effect above.

let me test if this is also happening on the old card, because todays update to beta/dev 2022.3

tested

nope, older version with my edits is perfect ;-)

relevant section:

      #items {
        padding: 0;
        margin: 0;
        overflow: hidden;
        /*transition: max-height 0.2s ease-in-out;*/
        height: 100%;
        overflow: clip visible;
      }

     /* #measure {
        overflow: clip visible;
      }
      #measure > * {
        margin: 8px 0;
        overflow: clip visible;
      }
      #measure > *:last-child {
        margin-bottom: 0;
        overflow: clip visible;
      }

      #measure > div * {
        overflow: clip visible;
      }
      #head > *:first-child {
        overflow: clip visible;
      } */

[thomasloven]

Should be fixed now. I also added a no_animation option.

[Mariusthvdb]

clipping seems fixed, animation (no option set yet) seems very off still.

using the new no_animation : true: almost perfect!

still feels a bit lazy, compared to

[thomasloven]

2.0.15

[ildar170975]

Yes! I do not see any clipping! Thomas, thank you!

[Mariusthvdb]

yes but we see this:

[thomasloven]

This photo shows 20.0.15 running on Firefox under Linux, Chrome under linux, Safari under macOS 10.15.7, Safari under iOS 15.3, Home Assistant Companion under iOS 14.4.2 and Safari under iOS 12.5.5.

All with no trace of the problems described. Also all showing a visual difference that's unique to 20.0.15 but is absent from all screenshot posted in #192, #199 and #206.

I've made a new release (2.1.0) to maybe force HACS to update correctly.

[Mariusthvdb]

yes, I confirm the clipping was no longer there.

But I am really sorry to report the screen above it simply popped in after refreshing the resource and seeing it loaded correctly in the inspector.

I had never seen it before, and I even missed the other issues reporting this.

returning to 20.1.12 immediately returned:

and

I have to admit I edited the resource by commenting the

      #items {
        padding: 0;
        margin: 0;
        overflow: hidden;
        /*transition: max-height 0.2s ease-in-out;*/
        height: 100%;
        overflow: clip visible;
      }

     /* #measure {
        overflow: clip visible;
      }
      #measure > * {
        margin: 8px 0;
        overflow: clip visible;
      }
      #measure > *:last-child {
        margin-bottom: 0;
        overflow: clip visible;
      }

      #measure > div * {
        overflow: clip visible;
      }
      #head > *:first-child {
        overflow: clip visible;
      } */

section, to not see clipping of the last child using that 20.0.12 version. will test 2.1.0 even so, and report back. thanks for your continuing efforts, very very much appreciated!

[Mariusthvdb]

seeing this now:

notice the icon chevron being larger than before, and checking the resource see it went from 24 to 32px. So proof it loaded correctly ;-)

now find that global no_animation setting.....

[thomasloven]

Well spotted! :wink:

[Mariusthvdb]

yep, and cool pic btw. you should use that somewhere ;-) a least publish the view code, so we can test at home too....

[thomasloven]

It's all in test/views/

[Mariusthvdb]

ofc.... I knew that, but forgot... my bad.

let me close this now the clipping is no longer happening. Thanks Thomas!