Too much empty space below banner after edit

[chrisbrasington]

Obsidian: v1.4.16
Banners: 1.3.3

Reproduce: To ensure I didn't have any conflicting plugins/css, I can reproduce this on a new vault.

Issue: Banners add too much white-space padding below the banner after editing any page. Disable/Enable plugin will remove the spacing. Not able to use banners in the meanwhile.

Notice how the "hello" shifts down. Issue persists at all times after first appearance.

Before edit:

During edit:

After edit:

[afreid]

Hey, I have the same issue.
Mac OS 14.1,
iOS 16.
Tony

[tombl]

Looks like the obsidian-banner-wrapper element needs to be at the top of the markdown preview, but a markdown-preview-pusher element gets added even before that.

[afreid]

As a workaround, I added a CSS snippet to the Appearance Settings:

.obsidian-banner-wrapper {
    margin-top: calc(var(--banner-height) - 200px);
    padding-top: 0.5em;
}

It works fine on Mac OS but doesn't make any difference on iOS.

[afreid]

Not sure why it took me so long, but, adding !important to the snippet got the work around sorted for iOS:

.obsidian-banner-wrapper {
    margin-top: calc(var(--banner-height) - 200px) !important;
    padding-top: 0.5em;
}

Of course, this is only a workaround, and you'll need to adjust for the height you have your banner set.

[Jeremiah-Olatunde]

I've written the following CSS snippet workaround

.obsidian-banner-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--banner-height);
    margin-top: 0;
    padding-top: 0;
}

.obsidian-banner{
    position: relative;
}

.markdown-preview-view:has(.obsidian-banner-wrapper) {
    padding-top: calc(var(--banner-height) + var(--file-margins));
}

before	after

Warning

This fix does not work in preview embedded.
Disable the Show banner in preview embed option in the Banner plugin settings

[gallbotond]

My simple fix (it works best for me in preview and in embed)

.obsidian-banner-wrapper {
  margin-top: 0;
}