close
The Wayback Machine - https://web.archive.org/web/20210830052307/https://github.com/laurent22/joplin/issues/4715
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ordered list digits cut off #4715

Open
jgreely opened this issue Mar 20, 2021 · 24 comments
Open

ordered list digits cut off #4715

jgreely opened this issue Mar 20, 2021 · 24 comments

Comments

@jgreely
Copy link

@jgreely jgreely commented Mar 20, 2021

The digits in ordered lists extend into the margin and get cut off. The problem is much more severe on the iOS client, especially with wider fonts, so that "monospace" won't even show a single-digit number. On the Mac desktop client, it will at least display correctly until you hit 100 items in the list.

Environment

Joplin version: 10.7.2
Platform: iOS (iPhone XS & iPad Mini)
OS specifics: 14.4.1

Steps to reproduce

  1. Create note or todo containing ordered list with 10 or more rows.
  2. On iOS, for items 10 and up, the first digit is cut off.
  3. Add a DIV tag at the top with style="padding-left:16px" to make the tens digit visible.
  4. Add additional items to the list to take it above 100 rows, and the leading digit is again cut off.
  5. Increase the padding to 32px to make the hundreds digit visible.

Describe what you expected to happen

All digits should be visible regardless of font or length of list.

ol-default-font
ol-monospace-font

@jgreely jgreely added the bug label Mar 20, 2021
@PIG208
Copy link

@PIG208 PIG208 commented Mar 21, 2021

It appears that the same problem occurs to the desktop application on Windows as well when the size of the numbered list goes to 1000 or above.
image
image

@CalebJohn
Copy link
Collaborator

@CalebJohn CalebJohn commented Mar 22, 2021

I just tested this on v1.7.11 Ubuntun 20.04 and v1.7.5 Android 11.

I could duplicate this behaviour in the viewer on android and on the WYSIWYG editor on the desktop. I could not duplicate this behaviour on the markdown editor/viewer on desktop.

@tessus
Copy link
Collaborator

@tessus tessus commented Mar 23, 2021

I was able to reproduce the problem on

Joplin 1.8.0 (dev, darwin)

Client ID: e354a932e6e143c782264aad4112b674
Sync Version: 2
Profile Version: 34
Keychain Supported: Yes

Revision: 5b65186b4 (dev)

Although not at 100, but at 1,000.

image

@jalajcodes
Copy link
Contributor

@jalajcodes jalajcodes commented Mar 23, 2021

I can see this bug on Windows 10,

after 999 items in markdown editor/viewer.
image

after 99 items in WYSIWYG editor
image

Joplin 1.7.11 (prod, win32)

Client ID: a0c954327e82488cb38da36c5c2a167d
Sync Version: 2
Profile Version: 34
Keychain Supported: Yes

Revision: f560563d8 (master)

@singhakshita
Copy link

@singhakshita singhakshita commented Mar 23, 2021

In noteStyle.ts , `margin-left : 1.7em ' is fixed , changing that to 2em fixes the issue ,but i guess making this dynamic will be a better choice .
can i work on this issue

@CalebJohn
Copy link
Collaborator

@CalebJohn CalebJohn commented Mar 23, 2021

@singhakshita Sure, go ahead. Be sure to read the guidelines first.

@coderrsid
Copy link
Contributor

@coderrsid coderrsid commented Mar 25, 2021

Is this solved? May i work on this?

@singhakshita
Copy link

@singhakshita singhakshita commented Mar 25, 2021

if we create a list after 99 th element i.e 100 100 102 th element in the rich text editor and then switch to markdown and back to rich text editor it appears like this
Screenshot 2021-03-25 at 6 01 21 PM
it actually doesn't add space , all the 'ul' elements appears inside the 99 th elements ,it can be seen here
Screenshot 2021-03-25 at 6 03 39 PM
This issue has been seen on mac OS ,i am not sure if this persists on any other OS.
I am not sure if this issue has to opened separately or should i send the pull request sorting out this issue as well in the same PR only(since it can be OS specific)

@coderrsid
Copy link
Contributor

@coderrsid coderrsid commented Mar 25, 2021

Well @singhakshita, i can reproduce this currently too on macOS.
Although what i figured out was that it takes all the elements in a single list item after 99th element, that's why it doesn't add space.

@singhakshita
Copy link

@singhakshita singhakshita commented Mar 25, 2021

yeah i said that only , i was just clarifying that it might look like its adding space but actually its adding list items inside that 99th element

@coderrsid
Copy link
Contributor

@coderrsid coderrsid commented Mar 27, 2021

Although @tessus , if i try to set a left margin to the ordered list to fix this, should i consider list upto 1000 or even greater? Thanks.

@tessus
Copy link
Collaborator

@tessus tessus commented Mar 27, 2021

I'm not really sure, but IMO this should be dynamic. I'm not a UI designer, but from a coding standpoint a dynamic solution would be preferable. In my case it only happens afer the 99th item and I never have numbered lists that long.

@jgreely
Copy link
Author

@jgreely jgreely commented Mar 30, 2021

On a desktop Chrome-based browser on a Mac, I can reproduce the 1000-length list problem with straight HTML, so I think correctly rendering three-digit list numbers on all platforms is sufficient. Experimentally, I've found that adding ol li {padding-left:1.5rem} does the trick on Mac/iPhone/iPad, even with large monospace fonts.

romanrguez192 added a commit to romanrguez192/joplin that referenced this issue Apr 8, 2021
Small change in margin-left in order to allow more digits to show
@laurent22 laurent22 removed the high label May 14, 2021
@stale
Copy link

@stale stale bot commented Jun 16, 2021

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

@stale stale bot added the stale label Jun 16, 2021
@PIG208
Copy link

@PIG208 PIG208 commented Jun 16, 2021

ghostwriter uses list-style-position: inside;
image

ol, ul {
    list-style-position: inside;
    padding: 0;
}

This can be the correct solution for us if we would like to change the way list items align if we want to support as many digits as we want.

Github uses a fixed padding of 2rem:
image

.markdown-body ol, .markdown-body ul {
    padding-left: 2em;
}

Apparently, this runs into the same problem when it comes to 1000, but generally, this is fine because they keep the markdown in a container with a padding of 32px.
image

I think the Github solution would be totally feasible in our case. By simply selecting an appropriate margin/padding we can support up to 99999 list items.
This should cover most of the use cases (plus it might be noticeably unresponsive when a list reaches that many items, which is a more critical problem than the cut off). A dynamic solution might not be necessary.

@harsh0032
Copy link

@harsh0032 harsh0032 commented Jun 25, 2021

May i work on this ?

@CalebJohn
Copy link
Collaborator

@CalebJohn CalebJohn commented Jun 25, 2021

@harsh0032 go ahead.

@Ritesh-Aggarwal
Copy link

@Ritesh-Aggarwal Ritesh-Aggarwal commented Aug 1, 2021

Is this issue solved?

@roman-r-m
Copy link
Collaborator

@roman-r-m roman-r-m commented Aug 1, 2021

Is this issue solved?

Doesn't seem so. You can try the latest pre-release and see for yourself.

@Ritesh-Aggarwal
Copy link

@Ritesh-Aggarwal Ritesh-Aggarwal commented Aug 2, 2021

Is this issue solved?

Doesn't seem so. You can try the latest pre-release and see for yourself.

I checked and the issue still persists. Can i work on this?

@PIG208
Copy link

@PIG208 PIG208 commented Aug 2, 2021

@Ritesh-Aggarwal you can go ahead!

@harsh0032
Copy link

@harsh0032 harsh0032 commented Aug 2, 2021

@Ritesh-Aggarwal
Copy link

@Ritesh-Aggarwal Ritesh-Aggarwal commented Aug 5, 2021

I am trying to setup for development but i am getting errors when i run npm install in root on windows
I checked the issue and found this forum but it isn't still working.Can anyone refer to a better solution to this issue.
forum mentioned: https://discourse.joplinapp.org/t/error-while-setting-up/15157/6

@JackGruber
Copy link
Contributor

@JackGruber JackGruber commented Aug 5, 2021

@Ritesh-Aggarwal please create a post on discourse for your installation problem of the dev env.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.