Ordered list with >=100 items omits first digit of ordinal

[wlabarron]

Describe the bug
When an ordered list has more than 100 items, the first digit of the number is hidden - so “100” displays as “00”, “101” displays as “01”.

Steps To Reproduce
Create an ordered list of 100 or more items.

Expected behavior
Numbers should appear fully, without missing digits.

Your Configuration (please complete the following information):

• Exact BookStack Version (Found in settings): v0.28.3
• PHP Version: 7.3
• Hosting Method (Nginx/Apache/Docker): Apache

[james-geiger]

@wlabarron Could you post a screenshot of what it looks like on your machine?

I did this on my Dev instance, and it worked as expected:

[wlabarron]

Please excuse the image being so thin, I'm not sure how public the content is allowed to be. The screenshot is items 98-105. Could it be because in the Markdown editor I've added headings in between some items, and it's tripped something up somewhere?

[james-geiger]

@wlabarron I'm really trying to break this:

One important thing to understand is that BookStack is just generating the HTML markup that is then interpreted by your browser. This is the markup that was generated for the screenshot above:

This most likely has something to do with CSS. In this screenshot, I've manually overridden the left-padding on the <ol> element, creating what appears to be a truncation:

Have you applied any style overrides that could have caused this to display improperly?

[wlabarron]

Thank you for investigating this. I've applied no style overrides, just changed the theme colour in Settings.

The HTML generated (with my data removed) is:

<h4 id="bkmrk-title">Title</h4>
<ol id="bkmrk-item-1" start="104">
   <li>Item 1</li>
   <li>Item 2</li>
</ol>

I've just been playing and found that by using the Inspector in my browser (Safari) to remove the padding: 0; which is applied to html, body, div, span, applet, object, and many other things, and removing the padding-left: 32px; which is applied to ol makes the numbers appear properly. Furthermore, it displays correctly with no changes in Firefox. Perhaps a Safari bug?

[james-geiger]

Confirming that this seems to be a safari issue that does not exist in blink/gecko rendering engines.

[ssddanbrown]

Strangely, does not occur on gnome-web either. Can confirm I can see it on iPad though.

[ssddanbrown]

There was a overflow: hidden; applied to all lists. Not sure why, probably the wrong fix to an issue a long time ago. Have now removed, will be part of the v0.29 release.

Think this was mainly affecting Safari as it's default font or text rendering has wider letter-spacing.