# Numbers Cut-Off in Long List
**URL:** https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856
**Category:** Bug
**Created:** [24 مارس 2017، 5:44م UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856 "2017-03-24T17:44:19Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Slowhand](https://meta.discourse.org/u/Slowhand)
#### Post date: [24 مارس 2017، 5:44م UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/1 "2017-03-24T17:44:19Z")
I searched for quite a while and didn’t see anything about this.
We have several lists of episodes that go into 2- and 3-digits, and the left side of the numbers are cut off starting at about 20.
When you get to triple-digits, the entire first number is gone.
Is this something I can have an Admin adjust on our end?
> **Example of double digits**
>
> 
> **Example of triple digits**
>
> 
Thank you for any help you can give me.
---
### Author:  [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [24 مارس 2017، 6:02م UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/2 "2017-03-24T18:02:37Z")
هذه مشكلة في Discourse، ولا علاقة لها بموقعك.
انظر [https://try.discourse.org/t/testing-long-lists/708?u=jomaxro](https://try.discourse.org/t/testing-long-lists/708?u=jomaxro)
سأنتقل بهذا الموضوع إلى #contribute:bug، ما لم يرد الفريق أنه من الأفضل إبقاؤه في #Contribute > UX.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [25 مارس 2017، 1:15ص UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/3 "2017-03-25T01:15:22Z")
Just edit the relevant CSS as needed in Admin, Customize, CSS
---
### Author:  [@neil](https://meta.discourse.org/u/neil)
#### Post date: [27 مارس 2017، 4:10م UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/4 "2017-03-27T16:10:18Z")
FYI the SCSS used:
```plaintext
.topic-body .contents {
ul, ol, dd {
margin-left: 40px;
}
}
```
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [20 يوليو 2017، 12:23ص UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/5 "2017-07-20T00:23:23Z")
Let’s see, now that commonmark is here we can start with whatever number we like and it is easier to demo this
1. six-hundred-sixty-six
and
1. sixty-six
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [20 يوليو 2017، 12:41ص UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/6 "2017-07-20T00:41:21Z")
CSS is broken on mobile numbers are cut
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [20 يوليو 2017، 1:30ص UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/7 "2017-07-20T01:30:48Z")
I don’t know that we really need to allocate enough space for ten digit numbered lists.. I think allowing space for the digit one plus two more, should work, eg:
1. the number “122” should work
vs.
1. the number “9999” doesn’t need to
---
### Author:  [@elijah](https://meta.discourse.org/u/elijah)
#### Post date: [20 يوليو 2017، 4:03ص UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/8 "2017-07-20T04:03:54Z")
> [@codinghorror](#):
>
> I don’t know that we really need to allocate enough space for ten digit numbered lists.. I think allowing space for the digit one plus two more, should work, eg:
> …
> 9999. the number “9999” doesn’t need to
_Except_ that one of the cases I’ve run into this is starting a line with a four digit year.
July 20th in History.
1. The first Women’s Rights Convention in Seneca Falls, New York ends.
2. British Columbia joins Canada.
3. The first International Special Olympics Summer Games are held at Soldier Field in Chicago.
4. Apollo 11 lands, first humans on the Moon.
In the preview, your quoted “9999.” is shown in full, but my years cut off the first digit. In your post, I just see two digits of your “9999.”. Of course, since this thinks I’ve created an ``, all of the years after the first are trashed _anyway_.
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [20 يوليو 2017، 10:24ص UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/9 "2017-07-20T10:24:18Z")
It seems to be due to this rule
```plaintext
ul, ol, dd {
margin: 0 0 9px 25px;
padding: 0;
}
```
If you comment that out, or “mark as it inactive in dev tools”, the list numbering just works, with any numbering.
It seems the `padding: 0` is the bigger culprit of that rule for causing issues.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [20 يوليو 2017، 1:46م UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/10 "2017-07-20T13:46:40Z")
Can you do a few screenshots of before and after?
We might as just do a PR to clean up this CSS if there is no impact on the “before”
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [20 يوليو 2017، 1:53م UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/11 "2017-07-20T13:53:04Z")
I’ll see what I can come up with. Might not be to later tonight though.
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [20 يوليو 2017، 3:04م UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/12 "2017-07-20T15:04:52Z")
## Before:
**User Menu:**
**Homepage:**
**Preview creating Topic:**
**Cooked Topic with Unordered Lists, Ordered Lists and Definitions**
* * *
## After
**User Menu:**
**Homepage:**
**Preview/Editing Topic that was created:**
**Cooked Topic with Unordered Lists, Ordered Lists and Definitions**
* * *
### Just for Kicks and Giggles:
(no before captured)
**Preview Pane:**
**Cooked Version**
**Verdict:**
The browser seems to use “safe” defaults for padding/margins to prevent ridiculous rendering? (tested in latest Chrome and IE 11 – because I had access to it)
I’ve yet to pin point why the preview shows 5 digits and cooked shows 4 when both have a padding of 40…
* * *
PR:
[https://github.com/discourse/discourse/pull/4980](https://github.com/discourse/discourse/pull/4980)
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [20 يوليو 2017، 3:19م UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/13 "2017-07-20T15:19:03Z")
For those wondering, I took screenshots of the menus and homepage because they utilize `ol` for the category/tags drop down and wanted to show they were not impacted negatively by this change.
The User Menu probably doesn’t use it, but figured, might as well screenshot it too!
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [20 يوليو 2017، 3:36م UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/14 "2017-07-20T15:36:37Z")
Here is a CodePen showing browsers cut off crazy long list numbers too (so it isn’t Discourse specific)
https://codepen.io/cpradio/embed/preview/xrvLpg?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=xrvLpg
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [20 يوليو 2017، 3:51م UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/15 "2017-07-20T15:51:09Z")
> [@cpradio](#):
>
> I’ve yet to pin point why the preview shows 5 digits and cooked shows 4 when both have a padding of 40…
I know why this occurs now, the 5 is in the “overflow” boundary and the preview content is within another div that has a padding of 7px all around, thus the overflow of the 5 is able to be seen.
**Preview padding, showing the 5 in overflow.**
**Cooked indicating no additional padding, thus no overflow shown**
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [25 يوليو 2017، 6:48م UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/16 "2017-07-25T18:48:38Z")
OK, this now merged:
The indent for lists now is quite deep:
And not really consistent with indenting of bulleted lists, which does impact readability.
1. testing
- testing
1. testing
@awesomerobot can you have a quick to see if there is a CSS fix to improve this a bit?
If not, one options may be to place a class via the renderer on “big” lists.
Then we can use our old styling and add some additional rules for
`.ul.digits-2`
`.ul.digits-3`
and so on.
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [25 يوليو 2017، 8:40م UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/17 "2017-07-25T20:40:19Z")
> [@sam](#):
>
> @awesomerobot can you have a quick to see if there is a CSS fix to improve this a bit?
The simple solution is to remove `ul` from the rule I removed `ol` from, that would make them both indented the same browser default amount.
I can submit such a PR fairly quickly (if you’d want to go that route)
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [25 يوليو 2017، 9:38م UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/18 "2017-07-25T21:38:57Z")
Sure go with that for now.
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [25 يوليو 2017، 9:50م UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/19 "2017-07-25T21:50:44Z")
K, I’ll get that done tonight. Let me go most of the endpoints of Discourse to make sure it doesn’t do anything crazy to the existing UI and I’ll get it submitted. 🙂
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [25 يوليو 2017، 10:25م UTC](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856/20 "2017-07-25T22:25:20Z")
Okay, had to approach it differently as doing the same fix for `ol` actually broke the main navigation.
[https://github.com/discourse/discourse/pull/4999](https://github.com/discourse/discourse/pull/4999)
Before:
After:
[Next page](https://meta.discourse.org/t/numbers-cut-off-in-long-list/59856.md?page=2)