On styling the image

[AkatQuas]

Hi there,
I want to put the qrcode in the center of a much wider div box.
But the display of the image is block !important in the style attribute.
What I did is to rewrite the code in the qrcode-js which is a not good way.

Here I want to know a better way for this!
Many thanks, bro!

PS: There is a way to style the parent node to be smaller and center in the upper node, but how about styling the image or canvas?

[gerardreches]

Hi @AkatQuas :)

Styles should be put to the parent node (the one who encapsulates the canvas and the image) and child nodes should automatically fill or stretch to the parent width. But I'm seeing that this isn't happening when I define a new width for that parent.

Since this component is build uppon the qrcodejs library, I shouldn't overwrite the base library functionality to avoid bugs in future updates.

So, I propose you to add this CSS to your project:

.qrcode {
    /* Styles for the parent node */
}
.qrcode > canvas {
    width: 100%;
    /* Styles for the canvas */
}
.qrcode > img {
    width: 100%;
    /* Styles for the image */
}

and include the class when you use the component:

<qr-code class="qrcode" text="Hello World!"></qr-code>

About the inline display: block !important, that comes from the qrcodejs library, so any doubts about why it's used should go there. In case of need, you could remove the style with javascript or jquery.

Hope this helps you,
Regards