search

fomantic / Fomantic-UI

Fomantic-UI is the official community fork of Semantic-UI
https://fomantic-ui.com
MIT License
3.52k stars 329 forks source link

[progress] min-width of bar is a bit too short #3068

Open Grosskopf opened 1 week ago

Grosskopf commented 1 week ago

Bug Report

Due to flaw in the css definition of the progress text, 11% can be interpreted as 1% at first glance in cases where the progress bar is slim

Steps to reproduce

  1. have a ui progress with a width of ~250px
  2. set the progress to 10.5%
  3. notice how the first "1" of the rounded "11" is not visible

Expected result

I expected to be able to see the 11 easily

Actual result

I only see the 1% part of the text 11% fully as the text is moved out to the left

Testcase

https://jsfiddle.net/gq045pk7/3/ includes two possible solutions

Screenshot (if possible)

screenshot showing a progress bar with the text 11% but the first 1 is not visible completely

Version

2.9.3

Grosskopf commented 1 week ago

Noticed this, because in our case we were using the font "Open Sans sans-serif" which makes it even less noticeable

https://jsfiddle.net/ep3rwhq1/ the same screenshot now with a sans-serif font showing that even the little notch that could draw attention to the missing 1 character is missing

lubber-de commented 1 week ago

Fixed by #3069 I decided to use your suggested min-width fix (2nd example) as it is compatible to all variants.