CSS issue with etn.vendor-widget-0.1.0


#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.


#3

I encountered the same thing when I implemented the widget in a bootstrap “powered” website (just giving a feedback in case it could help hehe), coming from this :

to :


#4

I didn’t try, but it looks like box-sizing property problem.

CSS box-sizing Property


#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:


#7

Thanks for all your feedback.

There was indeed a conflict with bootstrap involving the QR image width & box-sizing. This has been patched in a fork at https://github.com/etn-egg/vendor-payment-widget.

Please can you confirm this fixes the issue before a pull request is created to merge this into the main release?

Thanks!

Egg


#8

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

image


#9

Yep, looks all good here!


#10

Fixed the issue here too ! Thanks @Egg :smiley:


#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


#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