Generate more than one QRCode on the screen.

[somdesp]

Is it possible to generate more than one QRCode on the screen without them grouping together alone?

Because I have a loop with several QRCodes that should be inside each card, but I realized that they all carry them inside the tag

Even though I force it via CSS, they don't stay in the correct position.

[asoftwareworld]

Which CSS framework are you using?

[somdesp]

Which CSS framework are you using?

I forced it using bootstrap and the qrcodes are inside a loop

[asoftwareworld]

Could you please share the HTML code along with the CSS classes that you used to render the QR code? This will help us identify the issue you are facing.

[somdesp]

` <div class="col-md-4" *ngFor="let lt of  list; let i = index">
            <div class="card earnings-card" [id]="i+'_metadadoPanel_'+j" style="border:0.01cm solid;border-radius: 20px;height: 30mm;
            width: 300px;border-left:10px solid;"
              [style]="getColorCard(true,i+'_metadadoPanel_'+j,metadadoPanel.colorMetadado)">
              <div class="card-body">
                <div class="qrcodeImage" style="left: 1mm;top: 3mm;position: absolute;">
                          <asw-qr-code #parent [qrData]="lt .codeUrl" [width]="option.width" [height]="option.height"
                      [outerMargin]="option.outerMargin" [type]="option.type" [allowEmptyString]="true"
                      [logo]="option.logo" [density]="option.density" [backgroundColor]="option.backgroundColor"
                      [middleShape]="option.middleShape" [cornerInnerShape]="option.cornerInnerShape" [cornerOuterShape] = "option.cornerOuterShape">
                    </asw-qr-code>
                </div>
                <div style="border-left: 3px solid #82868b;height: 26mm;left: 28mm;position: absolute;top: 2mm;">
                </div>
                <div style="left: 25mm;position: relative; font-weight: 300;word-wrap: break-word; overflow-wrap: break-word;
                word-break: break-all;">
                  {{lt .titleMetadado}}
                </div>
              </div>
            </div>
          </div>`

Typescript

 title = 'ASW QR Code Demo';
  option: any;

  density: Density = {
    errorCorrectionLevel: 'Q',
    mode: 'Byte',
    typeNumber: 0
  };

  backgroundColor = '#ffffff';

  middleShape: MiddleShape = {
    color: '#000000',
    type: 'circle'
  };

  cornerInnerShape: CornerInnerShape = {
    color: '#000000',
    type: 'circle'
  };

  cornerOuterShape: CornerOuterShape = {
    color: '#000000',
    type: 'circle'
  };
  image = '';

 this.option = {
      width: 140,
      height: 140,
      type: 'svg',
      logo: this.image,
      outerMargin: 0,
      density: this.density,
      backgroundColor: this.backgroundColor,
      cornerInnerShape: this.cornerInnerShape,
      cornerOuterShape: this.cornerOuterShape,
      middleShape: this.middleShape
    };

I'm doing it this way, bootstrap in the project, and as you can see I have a list of URLS that I need to print inside each card, as you can see in the print of the first comment, the cards are placed correctly, but the qrcodes are all grouped inside the tag even though I create a new one inside the loop

[asoftwareworld]

I have used Bootstrap version 5.1.3 and attempted to reproduce this issue, but it is working as expected. Please refer to the snapshot below for confirmation.

Below is the HTML code which I have used

        <div class="col-md-4">
            <div class="card">
                <div class="header">
                    <h2>QR code</h2>
                </div>
                <div class="body">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <div class="qrcodeImage">
                                <asw-qr-code #parent [qrData]="qrdata" [width]="option.width" [height]="option.height"
                                    [outerMargin]="option.outerMargin" [type]="option.type" [allowEmptyString]="true"
                                    [logo]="option.logo" (click)="customizeDesign()"
                                    [density]="option.density" [backgroundColor]="option.backgroundColor"
                                    [logoStyle]="option.logoStyle" [middleShape]="option.middleShape"
                                    (qrCodeURL)="getScan($event)"
                                    [cornerInnerShape]="option.cornerInnerShape" [cornerOuterShape]="option.cornerOuterShape">
                                </asw-qr-code>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
	</div>
</div>