Badges not displayed properly [Windows]

o2r-project / o2r-extender

Allows the integration of badges into several research websites and data repositories.

https://doi.org/10.31223/osf.io/xtsqh

Apache License 2.0

1 stars 3 forks source link

Badges not displayed properly [Windows] #5

Open LukasLohoff opened 7 years ago

LukasLohoff commented 7 years ago

background is limited to a width of ~70 px

The shields.io badges are working fine one by one:

LukasLohoff commented 7 years ago

The problem is the the parent div width - increasing that "fixes" the issue. But if there's not enough space, ideally the badges should jump to the next line (which they already do right now) and still be displayed correctly (which they don't)

LukasLohoff commented 7 years ago

Found the problem here:

The badges are in-line SVGs and inherit some attributes from each other. Because of this, all badges inherit the background width from the first badge.

Workarounds:

Use the flat-squared style from Shields.io (https://img.shields.io/badge/style-flat--squared-green.svg?style=flat-square). These don't have the rounded edges which seem to cause the problem
Don't use inline SVGs

nuest commented 7 years ago

I'd rather go with flat-squared than with pngs.