CODEWITHSUNDEEP
angularqr-codezxingzxing-js
Eagle95
Eagle95

Reputation: 36

zxing-scanner resize to full height with angular

I need that my scanner is full height. Because it will be used also in other devices like tablet, laptop or phones in a webpage.

My code looks like this:

<zxing-scanner
  *ngIf="!showHelp"
  [previewFitMode]="'fill'"
  [enable]="true"
  [formats]="['QR_CODE', 'EAN_13', 'CODE_128', 'DATA_MATRIX']"
  [torch]="isFlashlightOn"
  (scanSuccess)="onScanSuccess($event)"
  (torchCompatible)="onTorchCompatible($event)"
  (camerasFound)="camerasFoundHandler($event)"
  (camerasNotFound)="camerasNotFoundHandler()"
>
</zxing-scanner>

Links to the library: https://github.com/zxing-js/ngx-scanner

this is how it looks like: enter image description here

but it should be full height.

Thanks

Upvotes: 0

Views: 3792

Answers (2)

The One
The One

Reputation: 4686

I don't know why the other answer didn't work for me, but this did

From https://github.com/zxing-js/ngx-scanner/issues/4

::ng-deep video {
  max-height: 100vh;
  width: 100vw;
  object-fit: contain;
}

  <zxing-scanner [previewFitMode]="'contain'"></zxing-scanner>

Upvotes: 0

ojathelonius
ojathelonius

Reputation: 804

Here's a working solution :

my-component.component.html

<zxing-scanner previewFitMode="cover"></zxing-scanner>

my-component.component.scss

::ng-deep {

  zxing-scanner {
    /* Root component needs to have height: 100% */
    height: 100%;
    /* Optional : you probably want full-width as well for landscape orientation or tablets */
    width: 100%;

  }

  video {
    /* !important because component already sets height property */
    height: 100% !important;
  }
}

Upvotes: 3

Related Questions