Skills widget bug


#1

Hello guys,

when entering small numbers in the skills widget the percentage overlaps the text.
I can imagine that when you guys developed the widget you thought that talking of a skill, people would use it normally to show off their abilities, therefore the numbers would be close to 100%. But if you use the widget to show other data, in my case the lack of sanitation service, then the layout is messed up.

The only workaround I have found is to add (in Chrome’s inspector) a few hundred pixels padding on the left of div.perc.show so that the percentage goes to the right. But that is not going to be responsive on different screens and it could overlap again. Maybe if you could help me align the percentage completely to the right of the percentage bar, it would fix it.

Web: http://stage.mosan.ch/guatemala/


#2

Hi,

Thank you for letting us know the issue. And to reposition the percentage to the most right position, you can try this CSS code below:

.roll-progress {
    padding-top: 25px;
    margin-bottom: 5px;
}
.roll-progress .perc {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px !important;
}

You can put the code in above into Customize > additional CSS

Regards,
Awan


#3

Thanks a lot Awan, that fixed the issue :slight_smile: