Prevent right sidebar from auto-scrolling on Contents toggling

Hello, I use the Contents Tab / Card in the Right SideBar for a Quick Capture Query mainly and I would want it to remain on top of screen while scrolling the Right Sidebar so everything else “flows” up under it while also preventing auto-scrolling to the top whenever this Contents Card is summoned with “Toggle Contents in Sidebar” shortcut. Is this somehow possible?

This is the DIV I believe I should be working on for this:

Can you suggest how can I do this?

Ok, I tried several things but now I feel that I need to explain myself: I want to be able to have a long piece of content opened in the right sidebar while I use it as reference to work in the main panel. Then, whenever something hits me (an idea, something that needs to be turned into a task or noted right away), I want to just hit the key shortcut for “Toggle Contents in Sidebar” and it should just appear at the top but without auto-scrolling all my contents up to the top because that way I loose the position I was on in the long content and I have to scroll back down after I would have captured my new entry.

As things are now, with or without modifying that DIV to have the position set to fixed or absolute I can’t escape the auto-scrolling of the right sidebar :frowning:

In addition to your CSS, add in custom.js something like this:

document.addEventListener("keydown", (e)=>{
    if (e.altKey && e.shiftKey && e.key === "C") {
        const div = document.querySelector(".sidebar-item.item-type-contents")
        if (!div) return

        e.stopPropagation()
        div.style.display = (div.style.display === 'none') ? 'flex' : 'none'
    }
});

Works like a charm. I actually re-used the “Alt”+c which I have for Toggling Content in Sidebar. Thanks @mentaloid.

I seem to have an issue with my approach. Whenever I open the Right SideBar wirh T R (Toggle Right ), the Contents Card is showing in expanded position, so whenever i Shift-Click a bullet on the left side it opens atop the Right SideBar content and just underneath the expanded Contents Card (Panel). Obviously I want the Contents Card to show only when I trigger it with “Alt” + “c” shortcut and, when I close it with the same shortcut, it should stay closed when I hide the Right SideBar with T R and then reveal it again.

The CSS code for the fixed position of the Contents Card is:

div.flex.sidebar-item.content.color-level.rounded-md.shadow-lg.item-type-contents {
  position: absolute;
  right: 12px;
  top: 3px;
  z-index: 999;
  width: 98%;
  background-color: var(--ls-primary-background-color);
}

and the js is about the same with your suggestion, just the triggering shortcut is set for “Alt”+“c”:

document.addEventListener("keydown", (e)=>{
    if (e.altKey && e.key === "c") {
        const div = document.querySelector(".sidebar-item.item-type-contents")
        if (!div) return

        e.stopPropagation()
        div.style.display = (div.style.display === 'none') ? 'flex' : 'none'
    }
});

Why is Contents Card revealing when I do T R even if it was closed before I toggled the Right SideBar Off? Can I do anything, CSS or JS-wise, to prevent it from showing when the Right SideBar is Toggled On?

Thanks for bearing with me on this one :-/

We have the same issue with Logseq UI: Right Sidebar Width Presets & Keyboard Shortcuts to work in conjunction with T R:

  • Code doesn’t understand intentions, only instructions.
  • If you want to automate more than one thing at a time, cannot simply patch two independent codes, should create a new one that properly merges them.
  • Cannot mix Logseq’s behavior with own custom behavior, without modifying Logseq’s code.
    • Every time Logseq’s code is executed, it ignores the custom code, so it has the potential of breaking its results. Custom code should be triggered to either:
      • do everything after Logseq’s code has finished
      • do everything on its own, without Logseq’s code
  • Therefore, should come with a workflow that respects the above.

I understand that my idea of a functional UI is different from the next person and that my custom code might create quirky issues but still I believe that my pursue for the best UI for my needs is worth undertaking.

I resolved the above by adding display: none; to the CSS. I have to type twice now “Alt”+“c” right after T R to reveal it the first time, can’t understand why but it’s better than having to always close it each time I T R. Would be nice though that I somehow solved this double typing issue… it must me something related to “Toggling it Off” first Alt+c, then revealing it second time… :-/

I must insist with this issue of mine. Hitting “Alt”+“c”+“c” is no biggie for me in the current situation (with the display: none; added to the CSS of the sidebar Card. But that only works only when the sidebar is open. If the sidebar is closed and I try to trigger the Contents card, obviously nothing happens. So i tried to modify the eventListener like so:

document.addEventListener("keydown", (e)=>{
    if (e.altKey && e.key === "c") {
	    if (rightbar.classList.contains("closed")) {
		logseq.api.set_right_sidebar_visible(true);
		return;
		}
		
        const div = document.querySelector(".sidebar-item.item-type-contents")
        if (!div) return

        e.stopPropagation()
        div.style.display = (div.style.display === 'none') ? 'flex' : 'none'
    }
});

I am now getting the sidebar opened when I do “Alt”+“c” but I now have to type 4 times “c” while keeping the “Alt” key down until I get the Contents card. So i believe the T R does something else than just make the sidebar visible, maybe also activates it somehow.

My whole undertaking is precisely to have a very fast way to get to the Edit Mode of a Bullet in the Contents Card so I can Quick Capture stuff fast, while working on something else.

Is there any api call I can make after logseq.api.set_right_sidebar_visible(true); that would get the right sidebar state the same with what T R does? :see_no_evil:

Should utilize the code of this post. Put each part (e.g. first checking set_right_sidebar_visible, last dispatching Escape etc.) inside a function and when each function finishes, call the next one through setTimeout.