How to make this responsive and each boxes fill to image box?

I am using the ng2-dragula module in my Ionic 5 project. I want to make it responsive and want to fit in the image box. I tried some CSS but didn’t work.

Here my code:

page.html

<ion-content>
  <ion-grid>
    <ion-row class="matrix0 ion-no-padding">
      <ion-col size="12" class="q1">
        <div class="q-header">Box</div>
        <ion-list dragula="bag1" id="q0" [(dragulaModel)]="q0" lines="none">
          <ion-item *ngFor="let item of q0" color="success" expand="block" text-wrap>
          </ion-item>
        </ion-list>
      </ion-col>
      <ion-col size="12">
        <ion-row class="main-row">
          <ion-col size="1.2" class="q1">
            <ion-list dragula="bag1" [(dragulaModel)]="q1" lines="none">
              <ion-item *ngFor="let item of q1" color="warning" expand="block" text-wrap>
              </ion-item>
            </ion-list>
          </ion-col>
          <ion-col size="1.2" class="q1">
            <ion-list dragula="bag1" [(dragulaModel)]="q2" lines="none">
              <ion-item *ngFor="let item of q2" [color]="item.color" expand="block" text-wrap>
              </ion-item>
            </ion-list>
          </ion-col>
          <ion-col size="1.2" class="q1">
            <ion-list dragula="bag1" [(dragulaModel)]="q3" lines="none">
              <ion-item *ngFor="let item of q3" [color]="item.color" expand="block" text-wrap>
              </ion-item>
            </ion-list>
          </ion-col>
          <ion-col size="1.2" class="q1">
            <ion-list dragula="bag1" [(dragulaModel)]="q4" lines="none">
              <ion-item *ngFor="let item of q4" [color]="item.color" expand="block" text-wrap>
              </ion-item>
            </ion-list>
          </ion-col>
          <ion-col size="1.2" class="q1">
            <ion-list dragula="bag1" [(dragulaModel)]="q5" lines="none">
              <ion-item *ngFor="let item of q5" [color]="item.color" expand="block" text-wrap>
              </ion-item>
            </ion-list>
          </ion-col>
          <ion-col size="1.2" class="q1">
            <ion-list dragula="bag1" [(dragulaModel)]="q6" lines="none">
              <ion-item *ngFor="let item of q6" [color]="item.color" expand="block" text-wrap>
              </ion-item>
            </ion-list>
          </ion-col>
          <ion-col size="1.2" class="q1">
            <ion-list dragula="bag1" [(dragulaModel)]="q7" lines="none">
              <ion-item *ngFor="let item of q7" [color]="item.color" expand="block" text-wrap>
              </ion-item>
            </ion-list>
          </ion-col>
          <ion-col size="1.2" class="q1">
            <ion-list dragula="bag1" [(dragulaModel)]="q8" lines="none">
              <ion-item *ngFor="let item of q8" [color]="item.color" expand="block" text-wrap>
              </ion-item>
            </ion-list>
          </ion-col>
          <ion-col size="1.2" class="q1">
            <ion-list dragula="bag1" [(dragulaModel)]="q9" lines="none">
              <ion-item *ngFor="let item of q9" [color]="item.color" expand="block" text-wrap>
              </ion-item>
            </ion-list>
          </ion-col>
          <ion-col size="1.2" class="q1">
            <ion-list dragula="bag1" [(dragulaModel)]="q10" lines="none">
              <ion-item *ngFor="let item of q10" [color]="item.color" expand="block" text-wrap>
              </ion-item>
            </ion-list>
          </ion-col>
        </ion-row>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

page.ts file

import { Component, OnInit } from '@angular/core';
import { DragulaService } from 'ng2-dragula';
import { ToastController } from '@ionic/angular';

let boxId = 0;

class Box {
  id: number;
  constructor(public name: string) {
    this.id = boxId++;
  }
}

@Component({
  selector: 'app-demop1',
  templateUrl: './demop1.page.html',
  styleUrls: ['./demop1.page.scss'],
})
export class Demop1Page implements OnInit {
  q0 = [new Box('')];
  q1 = [];
  q2 = [];
  q3 = [];
  q4 = [];
  q5 = [];
  q6 = [];
  q7 = [];
  q8 = [];
  q9 = [];
  q10 = [];

  constructor(private dragulaService: DragulaService,
    private toastController: ToastController) {
    this.dragulaService.drag('bag1')
      .subscribe(({ name, el, source }) => {
        el.setAttribute('color', 'danger');
      });

    this.dragulaService.removeModel('bag1')
      .subscribe(({ item }) => {
        this.toastController.create({
          message: 'Removed: ' + item.value,
          duration: 2000
        }).then(toast => toast.present());
      });

    this.dragulaService.dropModel('bag1')
      .subscribe(({ item }) => {
        item['color'] = 'success';
      });

    dragulaService.createGroup('bag1', {
      removeOnSpill: true,
      copySortSource: false,
      copy: (el, source) => {
        return source.id === 'q0';
      },
      copyItem: (box: Box) => {
        return new Box(box.name);
      },
      accepts: (el, target, source, sibling) => {
        // To avoid dragging from right to left container
        return target.id !== 'q0';
      }
    });
  }

  ngOnInit() {
  }
}

page.css file

.main-row {
    ion-col {
        padding: 9px 0 0 7px;
    }
    // background: url(/assets/imgs/grid_bg.jpeg) no-repeat center/cover fixed;
    background: url(/assets/imgs/grid_bg.jpeg);
    height: 400px;
    width: auto;
    background-size: 100%;
    background-repeat: no-repeat;
}

.matrix0 {
    margin-top: 30px;

    ion-list {
        background: transparent;
    }

    .list {
        padding: 0px;
        height: 100%;
    }

    ion-item {
        background: transparent;
        margin-bottom: 2px;
        width: 25px;
        height: 25px;
    }
}

Please help…

1 post - 1 participant

Read full topic