[Problem fixed] CSS Problem: Bullet Point Relationship Lines doesn’t show correctly in edit mode

CSS Problem: Bullet Point Relationship Lines doesn’t show correctly in edit mode. It seems the Lines all aligned to the left.

Basic settings:

  • Windows 7
  • Obsidian v0.11.3 using the default dark style.
  • I added a snippet with the following code:

.cm-hmd-list-indent .cm-tab,
ul ul,
ol ul,
ul ol,
ol ol {
position: relative;
}
.cm-hmd-list-indent .cm-tab::before,
ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before {
content:’’;
border-left: 2px solid rgba(0, 122, 255, 0.25);
position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0px; top: -5px; bottom: -4px;
}
ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before{ left: -11px; top: 0; bottom: 0;
}

And I tried the original code in this post. Meta Post - Common CSS Hacks - #2 by lizardmenfromspace

.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
content:’’;
border-left: 1px solid rgba(0, 122, 255, 0.25);
position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px;
}
ul ul::before { left: -11px; top: 0; bottom: 0;
}

Both the above codes show correctly in preview mode, but have the same problem in the edit mode.

Anybody can help?
Thanks!

Because no-one could help you here, you might have better luck asking for help on Discord in #css-themes with a link to this post.

@Peterhou What are you using for indentation — tabs or spaces? Please add your Markdown input example here, so we can take a look.

@saf-dmitry
I’m using tabs indentation.

input example:
tabs indentation.zip (235 Bytes)

@Peterhou Sorry, I cannot confirm the problem using your example. With this CSS (basically the same as your snippet above) on my machine (macOS 10.14.6, Obsidian 0.11.5) it looks as follows:

Screenshot 2021-03-18 at 16.10.19

The slight shift in lines is caused by mixing spaces and tabs used for indentation in your example, which should be avoided.

Here the CSS snipped I am using:

.theme-light {
    --guide-line-fg: rgba(120, 120, 120, 0.2);
}

.theme-dark {
    --guide-line-fg: rgba(120, 120, 120, 0.2);
}

.cm-hmd-list-indent .cm-tab, ul ul, ol ol, ul ol, ol ul {
    position: relative;
}

.cm-hmd-list-indent .cm-tab::before, ul ul::before, ol ol::before, ul ol::before, ol ul::before {
    content: "";
    border-left: 1px solid var(--guide-line-fg);
    position: absolute;
}

.cm-hmd-list-indent .cm-tab::before {
    left: 0;
    top: -0.4rem;
    bottom: -0.4rem;
}

ul ul::before, ol ol::before, ul ol::before, ol ul::before {
    left: -1rem;
    top: 0;
    bottom: 0;
}
2 Likes

@saf-dmitry Thank you very much. Now the problems is fixed. I just copied your code.

Thanks for the tip.

Just FYI, I also needed to set up my options: Editor → Use tabs: On.
Unless, without .cm-tab, the relationship lines disappeared.

1 Like

This works great. Thank you. Question though. On mobile in editor mode the lines do not show. In preview it does. Any ideas how to fix that?

Make sure you use tabs and not spaces for indentation.