• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Tabs not working properly

Participant ,
Feb 24, 2022 Feb 24, 2022

Copy link to clipboard

Copied

Why do these vertical tabs work when hoverung from the bottom to the top and not the top to bottom?

 

https://www.dropbox.com/s/zif3eauqf8qhxwt/L2-participating-in-Naep-test01.xd?dl=0 

 

TOPICS
Design , How to , Prototyping

Views

143

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Feb 24, 2022 Feb 24, 2022

Hey, the reason is that on hover, the bounding box of the component starts at the top of the tab hovered. So when you go from bottom to top, you are leaving the top of the hovered tab, and entering the next one. When you go from top to bottom, however, the top tab already overlaps the bottom tabs, and you can't activate a separate hover state when this one is still active, since you are never leaving the bounding box of the current hover state.

 

Overall, what you are trying to do here requires

...

Likes

Translate

Translate
Community Expert ,
Feb 24, 2022 Feb 24, 2022

Copy link to clipboard

Copied

Hey, the reason is that on hover, the bounding box of the component starts at the top of the tab hovered. So when you go from bottom to top, you are leaving the top of the hovered tab, and entering the next one. When you go from top to bottom, however, the top tab already overlaps the bottom tabs, and you can't activate a separate hover state when this one is still active, since you are never leaving the bounding box of the current hover state.

 

Overall, what you are trying to do here requires a feature I like to call "remote triggers", which would be one component changing another's state. Sadly, there doesn't seem to be any indication that the team is planning on implementing that in the near future, despite our request and upvotes on user voice.

 

The way you've made it kinda seems to work, but if you scroll while hovering one of those tabs, a lot of weird things happen 🙂 The safest way would be using Tap trigger, and changing the parent component, like in your previous example with the horizontal scroll & the year tabs. It will not be perfect, but will be more stable. And I think clicking to activate the different maps makes more sense from UX perspective anyways.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Feb 25, 2022 Feb 25, 2022

Copy link to clipboard

Copied

LATEST

Thank you.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines