CSS issue with etn.vendor-widget-0.1.0

In the .js container.style.width is set to “180px” but this doesn’t seem to display right:
(Tested in Safari 11.1.2 and Firefox 62.0 on OS X)

although a css class is specified container.classList.add("etn-payment"); in .js, correcting the width (203px + seems to work) via CSS requires “forcing” the issue:
.etn-payment { width: 203px !important; }

Anyone else having this issue / does 180px width work an other setups/browsers?
Could/should the CSS styling be left out of the .js and provided as a separate css file?

thanks for that - we’ve got our UI / UX guys looking at in the morning UK time (15 hours from now I’m afraid!).

Much appreciate you taking the time to point that out.


1 Like

Got the same issue when running the widget in a Wordpress website.

When the widget is run on its own as a single item on a web page, all looks fine.

No trouble at all! : )
Have had another look and actually the culprit seems to be the box-sizing of the <img> element:

1 Like

Worked for me! This is as displayed in Wordpress with the updated JS library:


1 Like

Yep, looks all good here!

Thanks for the feedback and for initially reporting this @Peter_DIR.

A pull request has been created with this and other updates. It will be merged on Monday pending feedback/comments.


1 Like

Thanks again for your feedback. The pull request has been merged into master and is now available.

This is a minor update primarily fixing QR image rendering issues with Bootstrap. Please update your projects with the last release.

Further language support should be released in the next few days.