search

Cordobo / angularx-qrcode

A fast and easy-to-use Angular QR Code Generator library with Ivy support
https://cordobo.github.io/angularx-qrcode/
MIT License
465 stars 126 forks source link

CSS class not working on Canvas #133

Closed atul4a2l closed 2 years ago

atul4a2l commented 3 years ago

I have to add border-radius to QR-code canvas element but it's not working. When i inspect the element from DOM and tried to add CSS there changes reflect.

Cordobo commented 2 years ago

Hi @atul4a2l

I'm a little bit late to the party, but this might help others as well. This is not an issue with angularx-qrcode but rather a general CSS styling thing, I added some sample code for the borderRadius and a button to the demo-app to control this. You can find the code starting with 12.0.3 in projects/demo-app. .. Adding a className to the component with the right styles might fix your issue.

    [allowEmptyString]="true"
    [className]="yourClassName">
    [elementType]="elementType"
    [errorCorrectionLevel]="errorCorrectionLevel"
    [qrdata]="qrdata"
    [scale]="scale"
    [width]="width"
</qrcode>```

whereas yourClassName is a CSS class:

.demoBorderRadius { border: dashed; border-width: 2px 4px; border-radius: 40px; overflow: hidden; }



HTH