search

fomantic / Fomantic-UI

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

Ordered and suffix list styles bug after 9. #1130

Open jjylha opened 4 years ago

jjylha commented 4 years ago

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

list

Version

2.7.8

exoego commented 4 years ago

I will look into this.

exoego commented 4 years ago

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

lubber-de commented 4 years ago

...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 commented 4 years ago

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 commented 4 years ago

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