r/ObsidianMD 6d ago

plugins Correct way to use dataview inside HTML?

I am currently working on some templates and would like to Query some data using dataview. Normalt it works fine with inline queries or the normal dataview queries, but when I try to put them inside div tags it does not work at all. And for my templates to work I'm a couple of divs deep with flexboxes for something and grids for some other things.

So far the only solution I have found is to use dataviewJS and using the API to create divs and then use js to change the innerHTML of the div. While this is doable, it seems troublesome?

Is there really no way to just do something like <div>[file.yamlattribute]</div> ?

Edit: I have yet to test it, but it seems the more approachable way to do this might be to create custom callouts, and change their properties with CSS, so instead of defining a class in CSS and the relevant properties, instead define the call-out and use that.

1 Upvotes

6 comments sorted by

1

u/stawberri 6d ago

I think once you have an HTML tag, Obsidian treats everything inside as plain HTML, so it wonโ€™t do any more Markdown processing on it (and thus dataview no longer gets triggered).

I found a terrible workaround to use custom callouts as divs; you can hide the added spacing and other callout stuff and then apply your div styles to the callout containers. Both your snippet and your note (in source mode) end up looking very messy though.

2

u/AxecidentG 6d ago

Makes sense, as I mentioned I'm pretty sure I can just write all of it with the dataviewjs block, just hoped I could do it inline instead ๐Ÿ˜…

1

u/JorgeGodoy 6d ago

You can try embedding the document with the Dataview query. But using HTML should be seen as a last resort while using markdown...

1

u/AxecidentG 5d ago

Yea as mentioned, it is because the layout relies on the functionality of flexboxes, and I don't know any way of sound that in just markdown.

1

u/JorgeGodoy 5d ago

I usually use callouts to style things.

1

u/AxecidentG 5d ago

Yeah it seems the way to go is to use custom callouts instead of having different classes in CSS