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.

Sign up for GitHub

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

Jump to bottom

bug: LdTabs inside LdSidenav moves content on changing tab index #792

Closed
3 tasks done
dpitois opened this issue Jun 29, 2023 · 1 comment · Fixed by #793
Closed
3 tasks done

bug: LdTabs inside LdSidenav moves content on changing tab index #792

dpitois opened this issue Jun 29, 2023 · 1 comment · Fixed by #793
Assignees
@borisdiakur
Labels
bug An issue describing unexpected or malicious behaviour. confirmed This label indicates that the issue has been reproduced and verified by the core team. released

Comments

@dpitois
Copy link

dpitois commented Jun 29, 2023

Prerequisites

Liquid version

5.5.0

Framework bindings

React

Current behavior

In our project we want to use LdSidenav as a details panel display on the right.
Some details content are display using LdTabs (and related Ld components), and it is display as expected:
image

When user clicks on the last tab, the LdTab moves to the left
image

Expected behavior

Clicking on tabs should not move elements inside the LdSidenav content.

Steps to reproduce

  1. Open the sandbox repro case
  2. Ensure the preview panel is not too large (for example around 800px large)
  3. Click on 2nd tab "Parameters": nothing special
  4. Click on the last tab "Change Log": the content move a few pixels on the left

Note:

  • if the preview panel is enlarged (around 1300px large), the behavior is not reproduced
  • if the tab title are shorter, the behavior is not easily reproduced

Code reproduction URL

https://github.com/dpitois/liquid-sidenav-tabs

Additional information

No response
@dpitois dpitois added bug An issue describing unexpected or malicious behaviour. triage An issue that needs assessment to determine its validity and urgency labels Jun 29, 2023
@borisdiakur borisdiakur added confirmed This label indicates that the issue has been reproduced and verified by the core team. and removed triage An issue that needs assessment to determine its validity and urgency labels Jun 30, 2023
@borisdiakur borisdiakur self-assigned this Jun 30, 2023
@borisdiakur borisdiakur added the in progress This label indicates that the issue is currently being worked on. label Jun 30, 2023
@dpitois dpitois changed the title bug: bug: LdTabs inside LdSidenav moves content on changing tab index Jun 30, 2023
borisdiakur added a commit that referenced this issue Jun 30, 2023
@borisdiakur
fix(ld-tabs): replace scroll into view with scroll to
325ff37 
Background: We want the tablist to scroll in a way that the selected tab is presented in the horizontal middle of the scroll area. We initially chose to use the scrollIntoView() method with the inline: 'center' option for this. However, this results in scrolling of elements wrapping the ld-tabs component as well. This change addresses the issue by replacing the usage of scrollIntoView() with the usage of the scrollTo() method.

Fixes #792
@borisdiakur borisdiakur mentioned this issue Jun 30, 2023
Merged
10 tasks
borisdiakur added a commit that referenced this issue Jul 3, 2023
@borisdiakur
fix(ld-tabs): replace scroll into view with scroll to
72387f7 
Background: We want the tablist to scroll in a way that the selected tab is presented in the horizontal middle of the scroll area. We initially chose to use the scrollIntoView() method with the inline: 'center' option for this. However, this results in scrolling of elements wrapping the ld-tabs component as well. This change addresses the issue by replacing the usage of scrollIntoView() with the usage of the scrollTo() method.

Fixes #792
borisdiakur added a commit that referenced this issue Jul 3, 2023
@borisdiakur
fix(ld-tabs): replace scroll into view with scroll to
2219a07 
Background: We want the tablist to scroll in a way that the selected tab is presented in the horizontal middle of the scroll area. We initially chose to use the scrollIntoView() method with the inline: 'center' option for this. However, this results in scrolling of elements wrapping the ld-tabs component as well. This change addresses the issue by replacing the usage of scrollIntoView() with the usage of the scrollTo() method.

Fixes #792
github-actions bot pushed a commit that referenced this issue Jul 3, 2023
@semantic-release-bot
chore(release): 5.6.3 [skip ci]
271af60 
## [5.6.3](v5.6.2...v5.6.3) (2023-07-03)

### Bug Fixes

* **ld-tabs:** replace scroll into view with scroll to ([2219a07](2219a07)), closes [#792](#792)
@borisdiakur
Copy link
Contributor

borisdiakur commented Jul 3, 2023 •
edited
Loading

🎉 This issue has been resolved in version 5.6.3 🎉

The release is available on:

📦🚀

@borisdiakur borisdiakur added released and removed in progress This label indicates that the issue is currently being worked on. labels Jul 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@borisdiakur borisdiakur

Labels
bug An issue describing unexpected or malicious behaviour. confirmed This label indicates that the issue has been reproduced and verified by the core team. released
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(ld-tabs): replace scrollIntoView with scrollTo emdgroup-liquid/liquid
2 participants
@borisdiakur @dpitois