Stack of cards in swiping cards: ionic 3

Ionic Framework ionic-v3
1

I was trying to build the swiping cards(as tinder cards). The cards are not displayed as(stackof cards) 7fKQM

But instead, they are displayed as one after another.gt

Can anyone know why it is happening like this?
This is my code.

<div swing-stack #myswing1 [stackConfig]="stackConfig" (throwoutleft)="voteUp(false)" (throwoutright)="voteUp(true)" id="card-stack" >
		<ion-card #mycards1 swing-card *ngFor="let job of jdetails">
			<div >
				<img src="assets/imgs/lap.jpg" (click)="openPage()" id="tagimg">
				<div class="textoncard title" >{{ job.company }}</div>
				<div class="textoncard subt">{{ job.jobtitle }}</div>
				<div class="textoncard time">2 days ago</div>
			</div>
			<ion-card-content>
				<table>
					<tr>
						<td class="label">Location</td>
						<td class="des">{{ job.location }}</td>
					</tr>
					<tr>
						<td class="label">Type</td>
						<td class="des">{{ job.jobtype }}</td>
					</tr>
					<tr>
						<td class="label">salary</td>
						<td class="des">{{ job.jobtype }}</td>
					</tr>
					<tr>
						<td class="label">Description</td>
						<td class="des">{{ job.jobdescrition }}</td>
					</tr>
					<tr>
						<td class="label">Source</td>
						<td class="des"><p style="color: purple;font-weight: bold;">Monster</p></td>
					</tr>
				</table>
				<div id="endbtn">
					<ion-buttons class="ionrow">
						
						<button ion-button icon-only clear (tap)="tapEvent($event)" [ngStyle]="{'color': buttonColor}">
							<ion-icon name="ios-heart"></ion-icon>
						</button> 
					
					
						<button ion-button icon-only clear style="color: black" id="sharebtn">
							
								<i class="fas fa fa-share-alt custom-share"></i>
							
						</button> 
						
					</ion-buttons>
				</div>
			</ion-card-content>
		</ion-card>
	</div>

export class FeedsPage {
  @ViewChild('myswing1') swingStack: SwingStackComponent;
  @ViewChildren('mycards1') swingCards: QueryList<SwingCardComponent>;
  stackConfig: StackConfig;
  recentCard: string = '';
  cards: Array<any>;
jdetails: any;
constructor(public jobdetail: JobsDataProvider
    )
   {
    this.stackConfig = {
      throwOutConfidence: (offsetX, offsetY, element: any) => {
        return Math.min(Math.abs(offsetX) / (element.offsetWidth/2), 1);
        
      },
      transform: (element, x, y, r) => {
        this.onItemMove(element, x, y, r);
      },
      throwOutDistance: (d) => {
        return 800;
      }
    };
}
ionViewDidLoad() {
    console.log('ionViewDidLoad FeedsPage');

    this.jobdetail.getJobDetails().then((data) => {
      console.log(data);
      this.jdetails = data;
    });
  }
ngAfterViewInit() {
    // Either subscribe in controller or set in HTML
    this.swingStack.throwin.subscribe((event: DragEvent) => {
      event.target.style.background = '#ffffff';
    });
    
  }
  onItemMove(element, x, y, r) {
    let color = '';
    const abs = Math.abs(x);
    const min = Math.trunc(Math.min(16 * 16 - abs, 16 * 16));
    const hexCode = this.decimalToHex(min, 2);

    if (x > 0) {
      color = '#' + hexCode + 'FF' + hexCode;
    } else {
      color = '#FF' + hexCode + hexCode;
    }

    element.style.background = color;
    element.style['transform'] = `translate3d(0, 0, 0) translate(${x}px, ${y}px) rotate(${r}deg)`;
  }

  
  decimalToHex(d, padding) {
    let hex = Number(d).toString(16);
    const numPadding = typeof (padding) === 'undefined' || padding === null ? 2 : padding;

    while (hex.length < numPadding) {
      hex = '0' + hex;
    }

    return hex;
  }
  }

I want them to be the stack format as shown in the first image. Can someone figure out what is the mistake I’m doing?
For buiding this i’m taking the reference from swiping cards in ionic 2

2

Hey I’ve written that tutorial, have you added the CSS? Because I can remember the view looks like this if you don’t have the appropriate CSS added. It’s described inside the post like this:

page-home {
  #card-stack {
    width: 90%;
    height: 200px;
    background: #047915;
    border: 10px solid #4cb338;
    margin: 100px auto 0;
    position: relative;
  }
 
  #card-stack ion-card {
    border-radius: 5px;
    position: absolute;
    text-align: center;
    top: 3%;
    height: 90%;
  }
}
1 Like
3

yeah I’ve taken reference from your blog.Thanks for your reply it has worked.please add more blogs …

4

I have the same problem. Have you fixed it?