Components: md-tab-group directive doesn't work with angular 2

Created on 22 Feb 2017  路  9Comments  路  Source: angular/components

Bug, feature request, or proposal:

BUG

What is the expected behavior?

To create tabs with styles and changing content

What is the current behavior?

Component create tabs, but they are resizing/ flickering. The styles aren't added to tabs

What are the steps to reproduce?

Install the example provided on the official page. Please see the attached screen shot
image

Which versions of Angular, Material, OS, browsers are affected?

Last angular 2 with last release for material design

Is there anything else we should know?

Tabs doesn't work correctly

Thank you!

cannot reproduce

All 9 comments

seems to be working fine on plunker https://plnkr.co/edit/L7VMB7ee4GioCpcvlvpO?p=preview can you provide plunker with broken behaviour?

@Gicus We'll need more information to reproduce this. Like @fxck suggested, can you provide a plunker? Is there a specific browser that you are testing with?

@kara @fxck on plunker, everything works perfect. Probably is a different library than one that is installed as a component in Angular 2. I update to last CLI angular and last material design. The issue persists. Please have a look on my project: https://www.dropbox.com/s/qj155f3w8z194lj/tabs3.rar?dl=0 or create a simple angular 2 project, import angular material and create tabs in main component
Thank you very much for your help

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

@mmalerba Please have a look on the archive that I sent or create a project using CLI and add material design. The issue persist. It is a bug, not a programming problem. I tested. Thank you

@Gicus This is not a bug. Please complete the guide to adding Material to your Angular app. You did not include a theme which the guide states is required. For future troubleshooting, please use one of the many community avenues as stated earlier.

@Gicus
Available pre-built themes:

deeppurple-amber.css
indigo-pink.css
pink-bluegrey.css
purple-green.css

Add the necessary theme to the styles.css file
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

And its not required to add a link reference to styles.css in the index.html page because it will be already added in the angular-cli.json file.

Please visit the below link to know more
https://github.com/angular/material2/blob/master/guides/theming.md

@Shyam-L92
it is weird issue with me that i originally have
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

it doesnt work until i change to

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

the tab start showing up.

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._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

xtianus79 picture xtianus79  路  3Comments

michaelb-01 picture michaelb-01  路  3Comments

3mp3ri0r picture 3mp3ri0r  路  3Comments

jelbourn picture jelbourn  路  3Comments

dzrust picture dzrust  路  3Comments