ITS callout box (floating div element) disappears after scrolling

Help
1

Problem

I have a rather large callout box with information about a character in a note. This callout box disappears if I scroll too far into the note. It happens just about when the bottom edge of the screen touches the bottom part of the callout box.

The callout box only reappears after I scroll about half the way back to the top.

Things I have tried

I searched online for clues or solutions but I didn’t find an answer.

What I’m trying to do

I’m trying to have this callout box in a fixed position while not disappearing the second it ends at the bottom part of my screen.

In this image you can still see the callout box and then…

Callout Box Problem 1
Callout Box Problem 11325×1003 120 KB

just one scroll later the callout box is gone.

Callout Box Problem 2
Callout Box Problem 21361×993 90.8 KB

edit: One thing that I forgot to mention is that this problem doesn’t occur IF I highlight a part of the callout box.

1 Like
2

I’m out on thin ice here, but I believe that is related to how Obsidian uses viewports to avoid having the entire document rendered at all times. When it is out of view, it’s not rendered anymore and disappears.

I’m not sure how you can ensure, or if you can, it to always be visible.

3

Could you please show the CSS you’re using to fix the position?

4

So I researched this a little more, and it’s proven to be an icky issue, see the following for related discussions and bugs:

My base CSS setup

After some trials and fails, this is how my CSS is looking. Note that the addition of /* */ allows for easy commenting out that line by adding /* in the front. And below only the basic styling is enabled.

.callout[data-callout="floating"] {
  position: fixed;
  top: 5px; /* */
  right: 10px; /* */
  width: 20em; /* */
  opacity: 1; /* */
  /* overflow: visible; /* */
  /* bottom: 10px; /* */
  /* min-height: 5vh; /* */
  /* z-index: 1000; /* */
  /* will-change: transform; /* */
  /* transform: translateZ(0); /* */
  /* -webkit-transform: translateZ(0); /* */
  /* -webkit-transform: translate3d(0, 0, 0); /* */
  /* max-width: 22em; /* */
  /* bottom: 5px; /* */
  background-color: blue; /* */
}

Also notice how the last line changing the background color to blue is not commented out, just to show that we’ve not commented out too much in the trickery above. If it looses the blue color, then revisit the CSS.

With this base setup, in a long page, the box appears floating in the top right, but when you scroll down a certain amount it disappears, and the rest of this post is related to trickery tried to not make it disappear

Applying overflow: visible

This was an early attempt suggested in the first link, and it was left on for the most test cases. Sadly, it didn’t work

Applying transform: translateZ(0) & co

Several variations of this was tried, including -webkit-transform, and translate3d(). Even tried various options of double div’s with outer div having position: relative and the transform only applied to inner div. No luck in either incantation.

Applying various heights and widhts

Tried various alternatives with various heights and widths, and min-height and max-width, and so on. No luck on either of these.

Changed z-index

Had no luck in changing the z-index from 0 to 1 to 1000 to 9994.

Applied will-change: transform

According to some MDN documentation, this could possibly have an effect. It didn’t, besides disabling some of the transform statements, so I tried with various variant of that as well, without any effect.

Changed to <meta> element

Some of the posts suggests various changes to the meta element, but Obsidian already implements: user-scalable=no and maximum-scale=1.0. And I tried changing to width: 100% both at the meta element, and body element. No luck with those changes either.

What about position: sticky

Some have had luck using position: sticky, but neither of the examples I tried worked out for me. Not sure why, as I tried multiple examples which worked nicely in my browser, but not within Obsidian.

Side-track of floating # h1

I also tried attaching style directly to a header element with the following, just to try and check if it had something to do related to placement within the DOM structure, but the header also disappeared. Didn’t try extensively with this option.

Net effect of all of this: The callout is floating when at the top part of the document, and disappears when scrolling enough down into the document.

Attached is my test file, with a somewhat long text so it should be easy to scroll down on most displays. My test environment is the macOS Mojave, 10.14.6, Obsidian 1.1.9 (installer 1.1.9), and the latter indicates Electron 21, Chromium 106.

f53664 Floating Callout.md (11.1 KB)

4 Likes
5

Hello Holroy,
first of all I would like to thank you for trying all these options and doing such an intensive research. I really appreciate it!

I’ll do some more research and see if I can find anything else that can help me. Otherwise I will look for another way to display the infobox that does not disappear when scrolling.

And I would like to thank you once again for your effort! :slight_smile:

The CSS code of the element is as follows:

.callout.callout:is([data-callout-metadata~="p+r"], [data-callout-metadata~=right]) {
    float: right;
    margin: unset;
    margin-left: 8px;
}
6

I discovered with some further testing that the box disappears due to it being unloaded due to performance reason according to one of the developers.

This means, as far as I can tell, that you’ll never be able to get the infobox permanently shown, given a longer document where this unloading of paragraphs happens.

So you would need to investigate in other means related to how to tackle your infobox. Could it be an option to get a side pane to show the infobox, somehow? Could you simple use the split commands, and show the top part with the infobox in the other pane?

1 Like
7

Hello Holroy,
Thank you again for your effort and your reply.

I will look into what alternatives I can use for my current situation. The idea with the sidepane sounds good.

Since it was mentioned in the thread you linked that a plugin may be able to help, I created a plugin request in which I linked the relevant threads. Maybe someone has the motivation and time to develop such a plugin. :slight_smile:

1 Like
8

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