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

MatPaginatedTabHeader doesn't scroll last tab fully into view #17853

Open
rvv-bouvet opened this issue Dec 2, 2019 · 1 comment
Open

MatPaginatedTabHeader doesn't scroll last tab fully into view #17853

rvv-bouvet opened this issue Dec 2, 2019 · 1 comment

Comments

@rvv-bouvet
Copy link

@rvv-bouvet rvv-bouvet commented Dec 2, 2019

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/components-issue-wsbxpk

Steps to reproduce:

  1. Set selectedIndex to last tab
  2. Render

Expected Behavior

image

Selected tab is scrolled fully into view and righthand pagination button disabled just as if the user manually clicked on the last tab

Actual Behavior

image

Tab is only partially visible and pagination button remains enabled. When tab titles vary in size only a few pixels of the last tab are visible. Clicking on the last tab manually scrolls it fully into view.

Environment

  • Angular: 8.2.14
  • CDK/Material: 8.2.3
  • Browser(s): Chrome, Firefox, Internet Explorer 11, Safari
  • Operating System (e.g. Windows, macOS, Ubuntu): All
@crisbeto

This comment has been minimized.

Copy link
Member

@crisbeto crisbeto commented Dec 2, 2019

Looks like we're measuring the element too early, because adding a timeout before skipping to the last tab fixes it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.