angular/components

Tabs partially hidden by arrows

Fechada

#12.889 aberto em 29 de ago. de 2018

Ver no GitHubGuia do colaborador
 (2 comentários) (0 reação) (0 responsável)TypeScript (6.650 forks)batch import
P3area: material/tabshelp wanted

Métricas do repositório

Stars
 (24.044 estrelas)
Métricas de merge de PR
 (Mesclagem média 3d 12h) (98 fundiu PRs em 30d)

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

Guia do colaborador

Direção de pesquisa
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.
Pilha de tecnologia
typescripthtmlcssangular
Domain
frontend
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
Meio dia
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Antigo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
basic understanding of Angular MaterialCSS overflow properties
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
30