angular/components

Tabs partially hidden by arrows

Open

#12889 opened on Aug 29, 2018

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (24,044 stars) (6,650 forks)batch import
P3area: material/tabshelp wanted

Description

Bug, feature request, or proposal:

https://stackblitz.com/edit/angular-gkiyz4?file=app/tab-group-basic-example.html

The last tab is selected by default, with a small screen the tab is partially hidden by the arrow. I have to click on the right arrow to display the tab.

What is the expected behavior?

Display entirely the tab.

What is the current behavior?

The tab is partially hidden by the arrow

What are the steps to reproduce?

https://stackblitz.com/edit/angular-gkiyz4?file=app/tab-group-basic-example.html

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"dependencies": {
    "@angular/animations": "^6.1.2",
    "@angular/cdk": "^6.4.3",
    "@angular/common": "^6.1.2",
    "@angular/compiler": "^6.1.4",
    "@angular/core": "^6.1.4",
    "@angular/forms": "^6.1.4",
    "@angular/http": "^6.1.4",
    "@angular/material": "^6.4.6",
    "@angular/platform-browser": "^6.1.4",
    "@angular/platform-browser-dynamic": "^6.1.4",
    "@angular/router": "^6.1.4",
    "material-design-icons": "^3.0.1",
  }

Chrome and FF latest.

Is there anything else we should know?

Nope

Contributor guide

Tech stack
typescripthtmlcssangular
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic understanding of Angular MaterialCSS overflow properties
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
Investigate the tab group component in Angular Material (likely in `src/lib/tabs/`). Focus on the scrollable tabs logic and CSS that hides tabs behind arrows. Check if the issue is due to a miscalculation of visible tab width or overflow handling. Review any existing tests for tab scroll behavior. The StackBlitz demo shows the last tab partially hidden by the right arrow on small screens; ensure tabs are fully visible before showing arrows.