Fixes styling of multi-digit ordered lists - made the number aligned to the right of the text, so that when more digits are required they will be added on the left and the right edge of the number will stay in place.

I usedtranslateX(-100%) to keep the right edge in a constant position, and adjusted the margin a bit since it previously accounted for the width of the number itself. The number I adjusted it to is to keep the look of numbers with single digits the same.

Testcase

https://jsfiddle.net/futybd2v/

Screenshot

Current (left) vs fixed (right)

Closes

Fixes#1130

fix(list): fix styling of multi-digit ordered lists

544aa54

auto-assignbot requested review fromColinFrick,exoego,ko2in,lubber-de,prudho andy0hami

October 23, 2021 18:38

lubber-de added state/awaiting-reviews

Pull requests which are waiting for reviews

lang/cssAnything involving CSS labels

Oct 23, 2021

lubber-de added this to the2.9.0 milestone

Oct 23, 2021

lubber-de added the type/bugAny issue which is a bug or PR which fixes a bug label

Oct 23, 2021

lubber-de requested changes

Oct 23, 2021

View reviewed changes

Copy link

Member

lubber-de left a comment•
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Thanks for the PR. I changed your jsfiddle to use the same selector as used by the patch itself.
https://jsfiddle.net/lubber/L8f627oy/9/
You will recognize that nested ordered lists are not properly positioned anymore:

To fix this, you shouldremove the following code, because it is not needed by your translatex(-100%) approach anymore (as the variable@orderedChildCountOffset is then not used, you can also remove it fromlist.variables OR simply set the variable to 0.65rem as well (somehow more backward compatible if people might have changed it in their custom themes)..

Fomantic-UI/src/definitions/elements/list.less

Lines 737 to 740 in67babf5

	ol.ui.listolli:before,
	.ui.ordered.list.list>.item:before {
	margin-left:@orderedChildCountOffset;
	}

Seehttps://jsfiddle.net/lubber/L8f627oy/11/

Also, such kinda long lists now do not have a nice left padding space anymore (at least when the counter reaches 100), so i suggest 2 additional changes

Change the suffixed list margin left from 1.25rem to 1.5rem (because the dot moves even single numbers too much to the left otherwise) ONLY to the first list element (not for nested ones)
Invent a newlong variant which further increases the left margin to 2rem, again ONLY to the first list element (not for nested ones)

ol.ui.suffixed.list,.ui.suffixed.ordered.list,ol.ui.suffixed.listol {margin-left:1.5rem;}ol.ui.long.list,.ui.ordered.long.list,ol.ui.long.listol {margin-left:2rem;}