#1

Things I have tried

I have created a normal list in Dataview that is displayed with bullet points.

What I’m trying to do

But I would like to have a numbered list displayed. Does anyone know how to do this?

LIST FROM #foldername1 AND "tag1"
SORT file.name ASC
#2

With a css snippet?

/* << Dataview list appearance >> */
.dataview.list-view-ul {
  list-style-type: decimal;
}

Angel

#3

Great!
Unfortunately, only a number with one digit appears with it. So the list starts with the first entry with “1” and shows the tenth entry with “0”. The eleventh entry then has a “1” again.

I tried to use the style “decimal-leading-zero” instead of “decimal”, but it doesn’t seem to work.

How to get numbers with more than one digit?

#4

I couldn’t think of a way to display a list as a numbered list using a regular Dataview query, but it’s easy to do using DataviewJS:

%%
Data:: item
Data:: item
Data:: item
Data:: item
Data:: item
Data:: item
Data:: item
Data:: item
Data:: item
Data:: item
Data:: item
Data:: item
%%

```dataviewjs
dv.pages('"Inbox/Dataview Numbered List Example"')
  .forEach(page => {
      dv.header(3, page.file.link);
      let output = "";
      dv.array(page.Data).forEach(data => {
          output += "1. " + data + "\n";
      });
      dv.paragraph(output);
  });
```

image
image1117×1041 40.3 KB

To use with your own data, you’d need to turn on DataviewJS in your Dataview settings if you haven’t already, then replace the “Inbox/Dataview Numbered List Example” with your own query.

This approach makes use of the fact that in Markdown, only the first item of a numbered list matters; subsequent numbers are calculated automatically. So starting each line with "1. " is enough to get it to render as a numbered list.

Hope this helps!

1 Like
#5

Any of these should work (and they do in my tests), so long as another css line isn’t taking precedent. A hack, but does adding important help?

```
/* << Dataview list appearance >> */
.dataview.list-view-ul {
  list-style-type: decimal !important;
}
```

Or if you move the line to the very end of the css snippets so that it is the final declaration, does that make a difference?

Angel

EDIT: Screenshot of dataview list with numbers…

dataview list with numbers
dataview list with numbers524×1154 31.6 KB

…and leading zero…

dataview list with numbers leading zero
dataview list with numbers leading zero536×1156 33.6 KB

#6

Unfortunately, I still do not get numbers with two digits.
When I use your code for a snippet and put the following query in my page:


LIST FROM #organisation AND "mitglieder/institutionelle mitglieder"
SORT file.name ASC

this output appears.

dataview-02
dataview-02132×764 23.3 KB

#7

Unfortunately, I’m not familiar with the syntax for a query in JS and don’t know how to place my query there.

dataview-03
dataview-03874×303 15.6 KB

#8

Attached is a zip with a folder and 11 dummy notes. When using the css and dataview, they should look like the image below. If you copy them into your vault or a test vault, do you still see atypical numbering?

Angel

11testnotes.zip (5.1 KB)

list style decimal obsidian
list style decimal obsidian1296×1244 68.4 KB

#9

How many css snippets you have?
Try with default theme and disable some css snippets.
I think this behavior is related with any css snippet that affects the list styles (the bullet, the padding, etc.)

#10

Hello Angel, thank you very much for caring so much about my problem. This is really a very strange thing. I copied your test notes into my Vault and displayed the Dataview list … et voilà … again only one digit.
Very strange.

dataview-04-testnotes

#11

I actually have only one snippet so far.
That’s strange, isn’t it?

#12

Ha! I have found the error.
It seems to be the theme. I have ‘Blue Topaz’ and Dataview seems to have a problem with that. When I set the default theme, the list appears with normal two digits.

dataview-05-testnotes

#13

Glad you have identified the conflict and can now decide what to do.

Good luck.

Angel

1 Like
#14

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.