Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jvgogh opened this issue Aug 8, 2023 · 5 comments
Labels
needs more info provide further context of the issue

Comments

@jvgogh
Copy link

jvgogh commented Aug 8, 2023

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 kinghat added the needs more info provide further context of the issue label Sep 12, 2023
@kinghat
Copy link
Owner

kinghat commented Sep 12, 2023

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

@jvgogh
Copy link
Author

jvgogh commented Nov 6, 2023

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
Copy link
Owner

kinghat commented Nov 6, 2023

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
Copy link
Author

jvgogh commented Nov 10, 2023

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

@silfax
Copy link

silfax commented May 29, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs more info provide further context of the issue
Projects
None yet
Development

No branches or pull requests

3 participants