MatTabNavBar not showing arrows
up vote
1
down vote
favorite
I've noticed that the MatTabNavBar is behaving different from a regular MatTabGroup when it comes to showing the arrows if the container gets too small for the tabs.
I used the official documentation to build the MatTabNavBar and MatTabGroup, but you can see here that the MatTabGroup is showing arrows and the MatTabNavBar is not.
https://angular-gaio5u.stackblitz.io
Template used for MatTabGroup:
<mat-tab-group>
<mat-tab
*ngFor="let tab of tabs"
[label]="tab.label"
>
{{ tab.label }}
</mat-tab>
</mat-tab-group>
Template used for MatTabNavBar:
<nav mat-tab-nav-bar>
<a
mat-tab-link
*ngFor="let tab of tabs"
[active]="isActive(tab)"
(click)="setActive(tab)"
>
{{ tab.label }}
</a>
</nav>
...so am I missing anything?! The expected result is the MatTabNavBar showing the same arrows as MatTabGroup.
angular angular-material angular-material-7
asked Nov 9 at 7:34
mr.alex
3231415
add a comment |
up vote
1
down vote
favorite
I've noticed that the MatTabNavBar is behaving different from a regular MatTabGroup when it comes to showing the arrows if the container gets too small for the tabs.
I used the official documentation to build the MatTabNavBar and MatTabGroup, but you can see here that the MatTabGroup is showing arrows and the MatTabNavBar is not.
https://angular-gaio5u.stackblitz.io
Template used for MatTabGroup:
<mat-tab-group>
<mat-tab
*ngFor="let tab of tabs"
[label]="tab.label"
>
{{ tab.label }}
</mat-tab>
</mat-tab-group>
Template used for MatTabNavBar:
<nav mat-tab-nav-bar>
<a
mat-tab-link
*ngFor="let tab of tabs"
[active]="isActive(tab)"
(click)="setActive(tab)"
>
{{ tab.label }}
</a>
</nav>
...so am I missing anything?! The expected result is the MatTabNavBar showing the same arrows as MatTabGroup.
angular angular-material angular-material-7
asked Nov 9 at 7:34
mr.alex
3231415
2
There's already an Open Issue related to this - #2177 The actual issue was reported here - #8795, which was marked as a Duplicate of #2177
– SiddAjmera
Nov 9 at 7:56
Thanks a lot @SiddAjmera! Maybe I should have checked that first, but thought this is probably my fault :)
– mr.alex
Nov 9 at 8:31
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I've noticed that the MatTabNavBar is behaving different from a regular MatTabGroup when it comes to showing the arrows if the container gets too small for the tabs.
I used the official documentation to build the MatTabNavBar and MatTabGroup, but you can see here that the MatTabGroup is showing arrows and the MatTabNavBar is not.
https://angular-gaio5u.stackblitz.io
Template used for MatTabGroup:
<mat-tab-group>
<mat-tab
*ngFor="let tab of tabs"
[label]="tab.label"
>
{{ tab.label }}
</mat-tab>
</mat-tab-group>
Template used for MatTabNavBar:
<nav mat-tab-nav-bar>
<a
mat-tab-link
*ngFor="let tab of tabs"
[active]="isActive(tab)"
(click)="setActive(tab)"
>
{{ tab.label }}
</a>
</nav>
...so am I missing anything?! The expected result is the MatTabNavBar showing the same arrows as MatTabGroup.
angular angular-material angular-material-7
asked Nov 9 at 7:34
mr.alex
3231415
I've noticed that the MatTabNavBar is behaving different from a regular MatTabGroup when it comes to showing the arrows if the container gets too small for the tabs.
I used the official documentation to build the MatTabNavBar and MatTabGroup, but you can see here that the MatTabGroup is showing arrows and the MatTabNavBar is not.
https://angular-gaio5u.stackblitz.io
Template used for MatTabGroup:
<mat-tab-group>
<mat-tab
*ngFor="let tab of tabs"
[label]="tab.label"
>
{{ tab.label }}
</mat-tab>
</mat-tab-group>
Template used for MatTabNavBar:
<nav mat-tab-nav-bar>
<a
mat-tab-link
*ngFor="let tab of tabs"
[active]="isActive(tab)"
(click)="setActive(tab)"
>
{{ tab.label }}
</a>
</nav>
...so am I missing anything?! The expected result is the MatTabNavBar showing the same arrows as MatTabGroup.
angular angular-material angular-material-7
angular angular-material angular-material-7
asked Nov 9 at 7:34
mr.alex
3231415
asked Nov 9 at 7:34
mr.alex
3231415
asked Nov 9 at 7:34
mr.alex
3231415
asked Nov 9 at 7:34
mr.alex
3231415
asked Nov 9 at 7:34
mr.alex
3231415
3231415
2
There's already an Open Issue related to this - #2177 The actual issue was reported here - #8795, which was marked as a Duplicate of #2177
– SiddAjmera
Nov 9 at 7:56
Thanks a lot @SiddAjmera! Maybe I should have checked that first, but thought this is probably my fault :)
– mr.alex
Nov 9 at 8:31
add a comment |
2
There's already an Open Issue related to this - #2177 The actual issue was reported here - #8795, which was marked as a Duplicate of #2177
– SiddAjmera
Nov 9 at 7:56
Thanks a lot @SiddAjmera! Maybe I should have checked that first, but thought this is probably my fault :)
– mr.alex
Nov 9 at 8:31
2
2
There's already an Open Issue related to this - #2177 The actual issue was reported here - #8795, which was marked as a Duplicate of #2177
– SiddAjmera
Nov 9 at 7:56
There's already an Open Issue related to this - #2177 The actual issue was reported here - #8795, which was marked as a Duplicate of #2177
– SiddAjmera
Nov 9 at 7:56
Thanks a lot @SiddAjmera! Maybe I should have checked that first, but thought this is probably my fault :)
– mr.alex
Nov 9 at 8:31
Thanks a lot @SiddAjmera! Maybe I should have checked that first, but thought this is probably my fault :)
– mr.alex
Nov 9 at 8:31
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53221503%2fmattabnavbar-not-showing-arrows%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
There's already an Open Issue related to this - #2177 The actual issue was reported here - #8795, which was marked as a Duplicate of #2177
– SiddAjmera
Nov 9 at 7:56
Thanks a lot @SiddAjmera! Maybe I should have checked that first, but thought this is probably my fault :)
– mr.alex
Nov 9 at 8:31