ng2-expansion-panels icon indicating copy to clipboard operation
ng2-expansion-panels copied to clipboard

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

Open user2301 opened this issue 7 years ago • 0 comments

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

user2301 avatar Jul 13 '17 14:07 user2301