Sitelet https://web.archive.org/web/20211228072517/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 · 30 comments
Open

ordered list digits cut off #4715

jgreely opened this issue Mar 20, 2021 · 30 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.

@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
Sponsor Contributor

@JackGruber JackGruber commented Aug 5, 2021

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

@Xindi7
Copy link

@Xindi7 Xindi7 commented Nov 26, 2021

Hi. I just confirmed the issue yesterday at my Android and IOS devices. I could not go over 100. Is there any work being done on this issue?

@MuhammadBilalBinAtique
Copy link

@MuhammadBilalBinAtique MuhammadBilalBinAtique commented Dec 5, 2021

Hi, I have examined the issue in both android and window 10.
In android, the problem occurs for 3 digit numbers ( after 99 ):
joplin android bug
In window 10, the problem occurs for 4 digit numbers ( after 999 ):
jolpin desktop bug
What I want to ask is Can I work on it?

@CalebJohn
Copy link
Collaborator

@CalebJohn CalebJohn commented Dec 5, 2021

@MuhammadBilalBinAtique go ahead, but please check the previous attempts to fix this and make sure your solution is better. This is a complex problem and only correct solutions will be accepted.

@MuhammadBilalBinAtique
Copy link

@MuhammadBilalBinAtique MuhammadBilalBinAtique commented Dec 5, 2021

@CalebJohn Can you please share some views on what the correct solution will look like?

@CalebJohn
Copy link
Collaborator

@CalebJohn CalebJohn commented Dec 5, 2021

@CalebJohn Can you please share some views on what the correct solution will look like?

Sorry @MuhammadBilalBinAtique, I have not looked into this problem deeply and cannot guide you in solving it.

@tessus
Copy link
Collaborator

@tessus tessus commented Dec 6, 2021

@MuhammadBilalBinAtique please do not post text as screenshots. seriously how do people come up with idiotic idea?

And then please maybe search for the problem on the forum or ask there. gh is used to discuss reproducible errors. The problem is known, nothing left to discuss. So either you can come up with a PR or use the forum for questions.

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.