Possible to apply css class cards not to every dataview table?

Good evening,
I have a little problem with my dashboard in Obsidian. I want to apply the css class cards to my projects and goals dataview tables but not to my book list dataview table. Here you can see my book list and I like the way it’s rendered:

And now when I apply cards to the note. The progress bars going out of the cards and that looks awful:

Okay the cards style doesn’t look that bad if someone can help me to fix that progress bar problem but I really prefer the first solution where I hopefully could apply cards only to a few elements in a note. If that is possible.

Things I have tried

I searched in the internet but I didn’t found something helpful. I tried a workaround with embedding a note in a note but that didn’t look nice.

I really hope someone can help me.

1 Like

Questions:

  • you query is in DQL or in DVJS?
  • you’re using the css class in Minimal (cards) or a css snippet?

Hello,

my dataview cells(both of them - books and projects) look like this:

I use the minimal theme at the moment. For the projects dataview I want to use the cssclass cards which I can apply in the yaml frontmatter and for the books I want to use the regular table view (In my opinion that would look better than both in cards view or both in table view). But the problem is when I use cssClasses: cards cards-1-1 table-wide in the yaml front matter it is applied to the whole note. But as I said I only want to use cards for projects and maybe goals but not for books in the same note “Home”. But I don’t know if this is possible. I nearly spent the whole day looking for solutions or workarounds but there aren’t much information in the internet and when I thought I found something helpful it had no effect to my problem.

So:

  • you’re using a DQL query;
  • you’re using the css class provided by Minimal theme.

One of the ways to solve that kind of issue is applying the css class “inside” the query. But that is only possible in dataviewjs(dvjs), using js code to add a class to the container where the query will be rendered.

So, the idea is: add the class cards only to the wanted query.

I guess you don’t know how to convert your DQL query in to a DVJS query. Because that I give you a dvjs code where you can place your DQL query and execute it inside dataviewjs.

```dataviewjs
// insert here your DQL query (replace the example below but leave the "`" at the start and at the end)
const DQL = `
TABLE WITHOUT ID
	file.mday,
	file.cday,
	file.etags
FROM "folder/path"
SORT file.mday DESC
`

// execute the DQL inside dvjs
dv.execute(DQL)

// add css class cards to this query container
dv.container.classList.add("cards")
```

Remove the cssclass: cards in your frontmatter and use this code only in the queries you want to be rendered as “cards”.
In the code above replace only the dql query part.

7 Likes

Oh my god it works. Thank you very much. And the solution isn’t that complex than I thought. Now my home note looks perfectly :blush:

1 Like

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