How can I reduce indentation space in callout? Plugins = Dataview, Style Settings, Minimal Theme

What I’m trying to do

I am using data view to display a daily list of notes and want to incorporate callouts with the minimal theme because of their folding properties. However, when I use callouts, there’s a large margin indentation on the left side that I find really unappealing.

Things I have tried

I tested the default theme and the indentation disappeared, but I much prefer using the minimal theme. Despite searching through forums, documentation, and style settings, I haven’t found a solution to this issue. I would be immensely grateful for any help, as I plan to use many callouts with nested lists in my vault. Any help would mean a great deal to me…thanks in advance


In a test vault with only Minimal (and Dataview) installed, I don’t see much of a difference in spacing between the default and Minimal themes within the callout itself. But I’ve noticed in the past Dataview blocks can have different spacing depending on theme.

Screenshot 2023-04-20 081605

Give this CSS a try. It will affect all callouts. You can target specific ones if you want to. Also, play around with the text-indent values to see what looks good to you (e.g., -0.5em, 0em, 0.5em, 1em).

.callout-content {
    text-indent: -0.25em;
    padding-left: 0em;
}

Ok, I am about to try this. Thanks a lot for the code. Also, since I have you, might you be able to give me some css code that reduces the spacing between headers? I don’t like how large the spacing between headers are currently within the theme I am using but I’d rather not go back to the default theme just to have less spacing between headings. Thank you a bunch

I just gave it a try and I don’t think this approach is going to work. It’s affecting both the dataview query list and the normal lists in callouts. The normal lists don’t have the large indent and the dataview queries do. I also wasn’t even able to reduce the space with that css snippet. The css snippet only seemed to affect the space between the text and the bullet point on the list. It didn’t move the bullet points along with the text.

Again, I’m not seeing the spacing issue (between lists in callouts and Dataview in callouts using Minimal), so it’s hard to pin down.

This one should only target callouts containing Dataview blocks. The padding order goes clockwise (top->right->bottom->left) so you can play around there. Can also be written as --callout-title-padding: 10px 10px 10px 10px; Needs Obsidian installer v1.1.8+

.callout:has(.block-language-dataview) {
  --callout-title-padding: var(--size-4-1) var(--size-4-3) var(--size-4-4) var(--size-4-4);
  --callout-content-padding: var(--size-4-2) var(--size-4-3) var(--size-4-3) var(--size-4-3); 
  text-indent: 0em;
  padding-left: 0em;
}

1

I’m wondering if it’s your query which is producing a double indentation, could you showc us the query?

I’ve experienced that in some cases when using the Minimal theme.

I know I’ve seen this before with Dataview queries, probably using Minimal, but can’t find anything at the moment with the odd spacing. Good call on the query check.

So here is the query I am using:

>```dataview
> LIST
> FROM ""
> WHERE file.cday = this.file.cday
>SORT file.name asc
>```

Here are the most recent images of the data view callout lists with the CSS snippet enabled and disabled:




Here are the settings I used within the snippet provided by Ariehen to get it as close to the left as I could. It’s still not perfect as there is still a larger indentation:

.callout:has(.block-language-dataview) {
  --callout-title-padding: 0px 10px 0px 24px;
  --callout-content-padding: 0px 0px 0px 0px; 
  text-indent: 0em;
  padding-left: 0em;
}

I am using obsidian version v1.1.16 with installer version v1.1.9 and all of the plugins are up to date

Using your query in a new vault using only the Minimal theme + Dataview installed, with no other snippets or changes, I see this:

So, something else is changing the spacing. Something in the Minimal Theme Settings or Style Settings plugin? An entirely different plugin? Another CSS snippet? If you’re not familiar with the debug steps, they are here →

https://forum.obsidian.md/t/24/11

This is so bizarre. Trust me, I know how to trouble shoot and I have already done this. To reiterate what I have done: I have created a New vault and only installed dataview and enabled minimal theme. I have not downloaded any other snippets or plugins. I am not using style settings or minimal theme settings plugin within this new vault. I am only using the query I included in my last post within a dataview callout and I am still getting the same large indentation. I have changed every single setting within the snippet you sent me and I have yet to be able to replicate what you showed within your last image. What operating system are you on? I am using windows 11.

Also thanks a lot for the help thus far. I appreciate your patience. I’m about at my wits end and this is driving me crazy. :sweat_smile:

Here is a visual of what is going on:

output

Understood on the troubleshooting. Just had to check.

Sorry if I wasn’t clear - the screenshot with the vertical line above isn’t using my snippet or any others. Just Dataview with Minimal, no settings changed.

I’m using macOS 13.3.1 (Obsidian v1.2.3) and macOS 12.6.5 (Obsidian 1.1.16). The spacing looks fine and is the same with both Obsidian versions. Just checked in Windows10 (Obsidian 1.1.16) and it looks fine there as well.

Not sure if it helps or not, but here’s the source from my screenshot

> [!NOTE] dataview block in callout
> ```dataview
> LIST
> FROM ""
> WHERE file.cday = this.file.cday
> SORT file.name asc
> ```

> [!example] ul in callout
> - one thing
> - another thing

> [!info] ol in callout
> 1. one
> 2. two
> 3. three

One callout trick I learned recently was to select all the content you want in a callout (the dataview block in this case) and ctrl+p > Insert callout (or hotkey). Everything is wrapped in a callout and you only need to adjust the title. That way you don’t have to fiddle with the > lines, spacing, etc. Helps a bit…

Try going into preview/reading mode. I bet it’s because you are in live preview editing mode that you aren’t seeing my issue. The issue doesn’t exist in the live preview editing mode, but that doesn’t do me any good because I read my notes via the reading preview mode

Ahh, reading mode. OK, so for reading mode the Contextual Typography plugin takes care of the excessive indenting in Dataview blocks on their own (thanks for the tip, kepano!). As for Dataview blocks in callouts, it’s a Minimal bug/quirk. The below seems a bit better than the previous snippet - just remember to turn it off if you switch themes or else your list bullets will be MIA :flushed:

.markdown-preview-view :is(.callout .dataview.list-view-ul) {
  padding-left: 0em;
}

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