Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[NavBar] Support stretched tabs #8871

Closed
jeremyputeaux opened this issue Dec 7, 2017 · 2 comments · Fixed by #10368
Closed

[NavBar] Support stretched tabs #8871

jeremyputeaux opened this issue Dec 7, 2017 · 2 comments · Fixed by #10368
Assignees
@crisbeto @andrewseguin
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@jeremyputeaux
Copy link

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

As seen in https://material.io/guidelines/components/tabs.html, tabs should use 100% of horizontal space when they fit and they use label space with arrows when they don't fit.
There used to be a md-stretch-tabs that seems to do this but not anymore as seen in #5286

What is the current behavior?

Currently, tabs are inline but we can't tell the tabs to use all space.

What are the steps to reproduce?

https://stackblitz.com/edit/mat-tab-nav-bar-not-using-all-horizontal-space

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

Respecting the guideline. Making an easy way to do it
@jeremyputeaux jeremyputeaux changed the title Stretch tabs to use 100% horizontal space when possible as long as possible Stretch tabs to use 100% horizontal space as long as tabs fit Dec 7, 2017
@andrewseguin andrewseguin changed the title Stretch tabs to use 100% horizontal space as long as tabs fit [NavBar] Support stretched tabs Dec 12, 2017
@andrewseguin andrewseguin self-assigned this Dec 12, 2017
@andrewseguin andrewseguin added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Jan 23, 2018
@mdelorimier mdelorimier mentioned this issue Feb 5, 2018
Closed
@crisbeto crisbeto self-assigned this Mar 12, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Mar 12, 2018
@crisbeto
feat(tabs): support stretched tabs in mat-tab-nav-bar
ee6400f 
Adds support for stretched tabs in the tab nav bar. Also removes a duplicate selector.

Fixes angular#8871.
@crisbeto crisbeto mentioned this issue Mar 12, 2018
Merged
mmalerba pushed a commit that referenced this issue Mar 15, 2018
@crisbeto @mmalerba
feat(tabs): support stretched tabs in mat-tab-nav-bar
f73387c 
Adds support for stretched tabs in the tab nav bar. Also removes a duplicate selector.

Fixes #8871.
andrewseguin pushed a commit that referenced this issue Mar 19, 2018
@crisbeto @andrewseguin
feat(tabs): support stretched tabs in mat-tab-nav-bar (#10368)
89ea485 
Adds support for stretched tabs in the tab nav bar. Also removes a duplicate selector.

Fixes #8871.
@mhosman
Copy link

mhosman commented Apr 9, 2018

Arrows not present?

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

@andrewseguin andrewseguin

Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(tabs): support stretched tabs in mat-tab-nav-bar crisbeto/material2
4 participants
@jeremyputeaux @crisbeto @mhosman @andrewseguin