Skip to content

Tabs partially hidden by arrows #12889

Open
@rsaenen

Description

@rsaenen

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/tabshelp wantedThe team would appreciate a PR from the community to address this issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions