CODEWITHSUNDEEP
htmlangularcssflexbox
Radiant
Radiant

Reputation: 390

Flex card with two rows

I have one card which I am using for images. I want to have two rows in my card for images. Concept behind this is, I am getting different product's images which i am showing properly in one line. On next line, i want to show all images from very first product. But i am not align it properly.

Currenlty, I am getting all the images in one row. I want to show all the images from class contain on next line.

Can someone help me with this CSS stuff? Below is my code.

HTML :

.image-card {
  width: 100%;
  display: flex;
  overflow-x: scroll;
  flex-direction: row;
}

.contain {
  display: flex;
  flex-direction: row;
}

.child {
  display: flex;
  flex-direction: row;
  height: 100px;
}

.child>img {
  width: 100px;
  height: 100px;
}

img {
  width: 100px;
  height: 150px;
}
<md-card class="image-card">
  <div *ngFor="let url of this.urls">
    <img [src]="url" (click)="openDialog(url)">
    <div class="button-row">
      <a md-raised-button (click)="goToProduct(url.slice(59, 64))">
              {{ url.slice(59, 66) }}
            </a>
    </div>
  </div>
  <div class="contain">
    <div class="child">
      <img [src]="this.secondImage">
      <img [src]="this.thirdImage">
      <img [src]="this.fourthImage">
      <img [src]="this.logo">
      <img [src]="this.brandImage">
    </div>
  </div>
</md-card>

Upvotes: 1

Views: 2069

Answers (2)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Use flex as suggested below

.image-card {
  width: 100%;
  display: flex;
  overflow-x: scroll;
  flex-direction: column;
}

.image-card .abc {
  width: 100%;
  max-height: 225px;
  overflow-x: auto;
  margin-top: 10px;
}

.contain {
  display: flex;
  flex-direction: row;
}

.child {
  display: flex;
  flex-direction: row;
  height: 100px;
}

.child>img {
  width: 100px;
  height: 100px;
}

img {
  width: 100px;
  height: 150px;
}
<md-card>
  <div class="image-card">
    <div *ngFor="let url of this.urls" class="abc">
      <div>
        <img [src]="url" (click)="openDialog(url)">
        <div class="button-row">
          <a md-raised-button (click)="goToProduct(url.slice(59, 64))">
                {{ url.slice(59, 66) }}
              </a>
        </div>
      </div>
      <div class="contain">
        <div class="child">
          <img [src]="this.secondImage">
          <img [src]="this.thirdImage">
          <img [src]="this.fourthImage">
          <img [src]="this.logo">
          <img [src]="this.brandImage">
        </div>
      </div>
    </div>
    <div *ngFor="let url of this.urls" class="abc">
      <div>
        <img [src]="url" (click)="openDialog(url)">
        <div class="button-row">
          <a md-raised-button (click)="goToProduct(url.slice(59, 64))">
                {{ url.slice(59, 66) }}
              </a>
        </div>
      </div>
      <div class="contain">
        <div class="child">
          <img [src]="this.secondImage">
          <img [src]="this.thirdImage">
          <img [src]="this.fourthImage">
          <img [src]="this.logo">
          <img [src]="this.brandImage">
        </div>
      </div>
    </div>
    <div *ngFor="let url of this.urls" class="abc">
      <div>
        <img [src]="url" (click)="openDialog(url)">
        <div class="button-row">
          <a md-raised-button (click)="goToProduct(url.slice(59, 64))">
                {{ url.slice(59, 66) }}
              </a>
        </div>
      </div>
      <div class="contain">
        <div class="child">
          <img [src]="this.secondImage">
          <img [src]="this.thirdImage">
          <img [src]="this.fourthImage">
          <img [src]="this.logo">
          <img [src]="this.brandImage">
        </div>
      </div>
    </div>

  </div>
</md-card>

Upvotes: 2

Gautam Naik
Gautam Naik

Reputation: 9338

Wrap ngFor with div and apply class="image-card" to it

.image-card {
  width: 100%;
  display: flex;
  overflow-x: scroll;
  flex-direction: row;
}

.contain {
  display: flex;
  flex-direction: row;
}

.child {
  display: flex;
  flex-direction: row;
  height: 100px;
}

.child>img {
  width: 100px;
  height: 100px;
}

img {
  width: 100px;
  height: 150px;
}
<md-card class="">
  <div class="image-card">
    <div *ngFor="let url of this.urls">
      <img [src]="url" (click)="openDialog(url)">
      <div class="button-row">
        <a md-raised-button (click)="goToProduct(url.slice(59, 64))">
              {{ url.slice(59, 66) }}
            </a>
      </div>
    </div>
  </div>
  <div class="contain">
    <div class="child">
      <img [src]="this.secondImage">
      <img [src]="this.thirdImage">
      <img [src]="this.fourthImage">
      <img [src]="this.logo">
      <img [src]="this.brandImage">
    </div>
  </div>
</md-card>

Upvotes: 1

Related Questions