angular/components

Tabs partially hidden by arrows

Chiusa

#12.889 aperta il 29 ago 2018

Vedi su GitHubGuida contributor
 (2 commenti) (0 reazioni) (0 assegnatari)TypeScript (6650 fork)batch import
P3area: material/tabshelp wanted

Metriche repository

Star
 (24.044 stelle)
Metriche merge PR
 (Merge medio 3g 12h) (98 PR mergiate in 30 g)

Descrizione

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

Guida contributor

Direzione di ricerca
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.
Tech stack
typescripthtmlcssangular
Dominio
frontend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
Mezza giornata
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Datata
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
basic understanding of Angular MaterialCSS overflow properties
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
30