Callouts not properly rendering spacing in Live Preview

Steps to reproduce

Create nested callouts like the following:

> [!EXAMPLE] Example Title
> Some text.
> 
> > [!FAIL] Callout A
> > Some text.
> 
> > [!FAIL] Callout B
> > Some text.
> 
> > [!SUCCESS] Callout C
> > More text.
> 
> In Live Preview mode, there's no spacing between Callouts A, B and C.
> In Reading mode, Callouts render properly (with spacing).

Expected result

Spacing should be rendered correctly between callouts both on Live Preview and Reading modes.

Actual result

Callouts only render spacing in Reading mode.
They’re “squeezed together” in Live Preview mode.

Environment

  • Operating system: Windows 10 Enterprise LTSC 21H2
  • Debug info:
    SYSTEM INFO:
    Obsidian version: v1.0.3
    Installer version: v1.0.3
    Operating system: Windows 10 Enterprise LTSC 2021 10.0.19044
    Login status: not logged in
    Insider build toggle: off
    Live preview: on
    Legacy editor: off
    Base theme: dark
    Community theme: none
    Snippets enabled: 0
    Restricted mode: off
    Plugins installed: 4
    Plugins enabled: 0

Additional information

Live Preview mode:

Reading mode:

1 Like

Apparently this is “normal” and part of a new design.

As the behavior is inconsistent between reading mode and Live Preview, this is most likely not normal.

1 Like

I agree that the behavior is inconsistent and still present in v1.2.8

The added spacing in reading view looks best, so I made a small snippet to add a top margin in live-preview mode

/*
	nested-callout-space-fix.css snippet
	
	Add a top margin to callouts nested inside another callout
	to make live-preview and reading mode look simillar
	
	2023-05-11 Alex Nordstrom (mr_abomination)
*/

/* Add a 16px top margin if two callouts are adjacent */
.is-live-preview div.callout + div.callout {
	margin-top: 16px !important;
}

nested-callout-fix.css (353 Bytes)

1 Like

This worked perfectly, thanks!

Steps to reproduce

  • Embed a page with consecutive callouts
  • Be in Live Preview
  • Observe the spacing in between the callouts in the embed

Did you follow the troubleshooting guide? [Y/N]

Yes, this is due to the default CSS and I checked in the sandbox with no themes to be absolutely sure.

Expected result

1em spacing in between as seen in reading mode:

(Screenshot done with edited CSS as shown below)

Actual result

No spacing in between callouts or after:

Environment


SYSTEM INFO:
Obsidian version: v1.3.5
Installer version: v1.3.5
Operating system: #25-Ubuntu SMP PREEMPT_DYNAMIC Fri Jun 16 17:05:07 UTC 2023 6.2.0-25-generic
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none

Additional information

The reason this is happening seems to be the life preview margins of callouts rule leaking into markdown embeds that should be in reading mode. The selector in question is in app.css lines 7308-7310.

.markdown-source-view.mod-cm6 .callout {
  margin: 0;
}

The selector here overrides the default style set on .callout on line 7256 even in the embed that should be in reading mode:

And a screenshot of the callout lacking padding:

Notably, you can see another unrelated possible bug/strange behavior where all paragraph elements inside embeds do not have top margins due to the app.css line 7724-7726. I’m not sure if this is intended so I’m just leaving this here as a related observation of margins in embeds.

image

The CSS is as follows:

.inline-embed .markdown-embed-content p:first-child {
  margin-top: 0;
}

This might have been intended as:

.markdown-preview-section > div:first-child p {
  margin-top: 0;
}

Alright, tangent over. Going back to the other issue…


To fix the callout spacing issue, the selector could be made more specific so as to target live preview elements only. Here’s the example solution I came up with:

.markdown-source-view.mod-cm6 .cm-callout > div > .callout {
  margin: 0;
}

/* You technically don't need the first part anymore, leading to this: */

.cm-callout > div > .callout {
  margin: 0;
}

*Edit: To fix callouts within callouts, I have edited the code above to have direct descendant selection.

This would use the fact that callouts in life preview have the cm-callout class as a parent while those in embeds do not.

Normal callout:

Callout inside an embed:

Changing the current selector to one of the two versions above fixes the issue:


In case any non-developers come across this and want a fix through adding a CSS snippet, you can fix this with the following:

:root div:not(.cm-callout) > div > .callout {
    margin: 1em 0;
}

*Edit: To fix callouts within callouts but with a snippet, I’ve edited the above code.

The :root is just there to add a bit of specificity.

If your theme changes how reading mode spacing works, this may not fit exactly, but this is about the simplest fix possible.

Here’s a screenshot of using it in my vault:

1 Like