CSS issue with etn.vendor-widget-0.1.0

Tech Talk
1

In the .js container.style.width is set to “180px” but this doesn’t seem to display right:
image
(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?

2

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.

R.

1 Like
5

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.

6

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

1 Like
8

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

image

1 Like
9

Yep, looks all good here!

11

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.

Egg

1 Like
12

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.

Egg

2 Likes