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.

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

ng2-expansion-panels : panel alignment with angular material card and styling the panel #14

Open
user2301 opened this issue Jul 13, 2017 · 0 comments

Comments

@user2301
Copy link

I have angular 2 application, where I am displaying cards in different colors in rows and columns.I have added 2 expansion panels to the card. I want the panel to fit the card width and to have same colour as of the card.Also the contents in the panel to be left aligned. On expanding the panel, all the cards in the same row gets expanded. How do I fix this issue? Or this is the expected behaviour?

 <div fxLayout="row" fxLayoutWrap  style="padding-bottom: 15px; 
    padding-top: 15px; margin:auto; justify-content: center;background-color:paleturquoise;" >  
    <md-card fxFlex.gt-md="30" fxFlex.md="30"  fxFlex.sm="auto" fxFlex.xs="100" *ngFor="let data of myData" style="margin:10px;"
[ngStyle]="{'backgroundColor': data.time > timeLimit1  ? '#69F0AE':(data.time < timeLimit2  ? '#FF5252':'yellow' )}">
        <md-card-content >  
        <h1>Name: {{data.name}} </h1> 
        <h3 [ngStyle]="{'margin-top': '-3px','margin-bottom': '20px'}">{{data.time | date:'HH:mm:ss, MMMM dd'}}</h3>
        <h3>
        <a routerLink="">some link here</a> 
        </h3>
            <expansion-panels-container>
                <expansion-panel >
                <expansion-panel-title>
                Title1
                </expansion-panel-title>
                <expansion-panel-content>
                <h2>content1: {{data.somedata1 }}</h2>
                <h2>content2: {{data.somedata2}}</h2>
                <h2>content3: {{data.somedata2}}</h2>
                <h2>content4: {{data.somedata3}}</h2>
                </expansion-panel-content>
                </expansion-panel>
                <expansion-panel>
                <expansion-panel-title>
                Title2
                </expansion-panel-title>
                <expansion-panel-content>
                <h2>content2: {{data.somedata2}}</h2>
                <h2>content3: {{data.somedata2}}</h2>
                <h2>content4: {{data.somedata3}}</h2>
                </expansion-panel-content>
                </expansion-panel>
            </expansion-panels-container>
        </md-card-content>
    </md-card> 
    </div>

capture

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant