angular/components

Tabs partially hidden by arrows

Fermée

#12 889 ouverte le 29 août 2018

Voir sur GitHubGuide contributeur
 (2 commentaires) (0 réaction) (0 personne assignée)TypeScript (6 650 forks)batch import
P3area: material/tabshelp wanted

Métriques du dépôt

Stars
 (24 044 étoiles)
Métriques de merge PR
 (Merge moyen 3j 12h) (98 PRs mergées en 30 j)

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

Guide contributeur

Direction de recherche
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.
Stack technique
typescripthtmlcssangular
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
Une demi journée
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Ancienne
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
basic understanding of Angular MaterialCSS overflow properties
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
30