thomasloven / lovelace-fold-entity-row

🔹 A foldable row for entities card, containing other rows
MIT License
561 stars 37 forks source link

Lines outside the card #186

Closed kksligh closed 2 years ago

kksligh commented 2 years ago

My Home Assistant version: 2021.11.2

Fold-entity-row version (FROM BROWSER CONSOLE): 20.0.9

What I am doing: Since I updated to the latest core version, all my lovelace cards show lines outside the box on the folds. There's no action as this is a cosmetic issue. I use this card quite a bit in my dashboards, and I can confirm its doing it with all cards.

What I expected to happen: I expect the lines to stay within the card like it was before.

What happened instead: See image attached

line outside card example

Minimal steps to reproduce: I'm attaching example code but from what I can tell, just have the latest core version and it breaks the visual. I could be wrong here, but this was not an issue until after the update this AM.

# The least amount of code possible to reproduce my error
type: entities
entities:
  - type: custom:fold-entity-row
    head:
      type: section
      label: TV Remote
    padding: 0
    entities:
      - type: custom:roku-card
        entity: media_player.kids_bedroom_tv_tcl_roku
        tv: true
        apps:
          - icon: mdi:netflix
            app: Netflix
          - icon: mdi:amazon
            app: Prime Video
          - icon: mdi:castle
            app: Disney Plus
          - icon: mdi:hulu
            app: Hulu
        name: Kids Bedroom TV
  - type: custom:fold-entity-row
    head:
      type: section
      label: Sonos
    padding: 0
    entities:
      - type: custom:mini-media-player
        entity: media_player.kids_bedroom_sonos
        group: true
        tts:
          platform: cloud
        hide:
          controls: false
          shuffle: false
        speaker_group:
          platform: sonos
          show_group_count: true
          entities:
            - entity_id: media_player.basement_sonos
              name: Sonos Basement
            - entity_id: media_player.kids_bedroom_sonos
              name: Sonos Kids Bedroom
            - entity_id: media_player.kids_playroom_sonos
              name: Sonos Kids Playroom
            - entity_id: media_player.kitchen_sonos
              name: Sonos Kitchen
            - entity_id: media_player.living_room_sonos
              name: Sonos Living Room
            - entity_id: media_player.master_bedroom_sonos
              name: Sonos Master Bedroom
            - entity_id: media_player.master_bathroom_sonos
              name: Sonos Master Bathroom
            - entity_id: media_player.study_sonos
              name: Sonos Study
            - entity_id: media_player.garage_move_1_sonos
              name: Sonos Move 1
            - entity_id: media_player.outdoors_move_2_sonos
              name: Sonos Move 2
# End of code

Error messages from the browser console:


By putting an X in the boxes ([X]) below, I indicate that I:

Mariusthvdb commented 2 years ago

thanks for posting this, was just about to.... ;-) can confirm this to happen in any tested browser, Including Chrome. It's weird because it also moves the view to the left, especially noticeable in the iOS companion app, causing a wider margin on the scroll bar.

even less code:

  - type: custom:fold-entity-row
    head:
      type: section
      label: All Doors
    padding: 0
    entities:
      - entity: binary_sensor.garage_door
      - entity: binary_sensor.front_door
RedWheiler80 commented 2 years ago

Same problem here, I'ts mostly annoying on a smartphone. Every view with a fold-entity-row on will move (slightly) from left to right when navigating.