Gbuomprisco / ng2-expansion-panels

Expansion Panels component for Angular 2
18 stars 3 forks source link

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

Open user2301 opened 7 years ago

user2301 commented 7 years ago

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