kinghat/tabbed-card

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

jvgogh opened this issue · 5 comments

jvgogh commented

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
2023-08-08.07-41-38.mp4
kinghat commented

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

jvgogh commented

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

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

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