search

kinghat / tabbed-card

a custom card for home assistant that utilizes tabs to segregate individual cards.
MIT License
87 stars 10 forks source link

inside vertical stack with overflow, clicking an icon will scroll to end of overflow instead of staying on clicked icon #109

Open jvgogh opened 10 months ago

jvgogh commented 10 months ago

Given a tabbed-card within a vertical-stack having a bunch of tabs defined. As more tabs are enabled than fit in the panel, this causes overflow to be enabled (with icons visible only, not sure if that is relevant). Clicking on an icon scrolls to the last icon instead of keeping that icon selected. See attached video.

This repros on both Chrome desktop & Fully Kiosk on Android.

repro code (using Masonry view type) :

type: vertical-stack
cards:
  - type: custom:tabbed-card
    styles:
      '--mdc-theme-primary': white
      '--mdc-tab-text-label-color-default': grey
    tabs:
      - attributes:
          icon: mdi:human-male-female-child
        card:
          type: vertical-stack
          cards: []
      - attributes:
          icon: mdi:alarm-panel
        card:
          type: vertical-stack
          cards: []
      - attributes:
          icon: mdi:garage
        card:
          type: vertical-stack
          cards: []
      - attributes:
          icon: mdi:bed-king
        card:
          type: vertical-stack
          cards: []
      - attributes:
          icon: mdi:weather-sunny
        card:
          type: vertical-stack
          cards: []
      - attributes:
          icon: mdi:home-roof
        card:
          type: vertical-stack
          cards: []
      - attributes:
          icon: mdi:weather-partly-cloudy
        card:
          type: entities
          cards: []
      - attributes:
          icon: mdi:table-chair
        card:
          type: vertical-stack
          cards: []
      - attributes:
          icon: mdi:book-open-page-variant
        card:
          type: vertical-stack
          cards: []
      - attributes:
          icon: mdi:door
        card:
          type: vertical-stack
          cards: []
      - attributes:
          icon: mdi:desk
        card:
          type: vertical-stack
          cards: []
      - attributes:
          icon: mdi:calendar
        card:
          type: vertical-stack
          cards: []
      - attributes:
          icon: mdi:sofa
        card:
          type: vertical-stack
          cards: []
      - attributes:
          icon: mdi:fridge
        card:
          type: vertical-stack
          cards: []
      - attributes:
          icon: mdi:shower
        card:
          type: vertical-stack
          cards: []
      - attributes:
          icon: mdi:water-pump
        card:
          cards: []
          type: vertical-stack

https://github.com/kinghat/tabbed-card/assets/5240097/350bbcc9-021f-416a-a20b-e21f77614f4d

kinghat commented 9 months ago

hi, thanks for providing the config. your video doesnt seem to show anything. are you still having this issue?

jvgogh commented 7 months ago

Hi Kinghat, sorry for the late reply. does "your video doesnt seem to show anything" mean you don't see any content in the video feed or does it mean you don't see the issue I'm describing?

kinghat commented 7 months ago

Hi Kinghat, sorry for the late reply. does "your video doesnt seem to show anything" mean you don't see any content in the video feed or does it mean you don't see the issue I'm describing?

image

jvgogh commented 7 months ago

Here's the same video but then on YouTube: https://youtu.be/k5HUi2YPMyY hope that helps....

silfax commented 1 month ago

i can confirm this behavior on several desktop browsers. working as expected in the android and ios apps.