Callouts not properly rendering spacing in Live Preview

Bug reports
, ,
1

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:

image
image904×633 24.3 KB

Reading mode:

image
image903×666 24.2 KB

1 Like
2

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

3

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

1 Like
4

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)