Ordered and suffix list styles bug after 9.

[jjylha]

trafficstars

Bug Report

When ordered list (with added dots from list.variables) or suffix list has numbers over 9. the styling fails.

Steps to reproduce

https://jsfiddle.net/qgms8p07/

Expected result

Numbers have the same margin relative to text no matter how big the number is.

Actual result

When list number is bigger than 9. the number/dot will have no margin relative to text and will even overlap.

Testcase

https://jsfiddle.net/qgms8p07/

Screenshot

Version

2.7.8

[exoego]

I will look into this.

[exoego]

This is similar to https://github.com/Semantic-Org/Semantic-UI/issues/2332

[lubber-de]

...and also https://github.com/Semantic-Org/Semantic-UI/issues/2639 https://github.com/Semantic-Org/Semantic-UI/issues/2701 https://github.com/Semantic-Org/Semantic-UI/issues/5003 https://github.com/Semantic-Org/Semantic-UI/issues/5493

[exoego]

I resigned myself from this issue since I am not familiar with counter-things in CSS. (I will try to create a PR, but may take a long time). I wonder this is fixable without breaking change 🤔

[byte916]

I have the same problem and want to fix it.

I see three ways

1. Using javascript
2. Adding new selectors, for example - .tens, .hundreds, .thousands etc
3. Adding ability to return to native numbering