Option to show/hide top bar(s) when note is scrolled (or just when keyboard is open)

Use case or problem

I’d like more screen space on mobile when typing on the screen keyboard, and less interface clutter when I’m drafting text. I especially want this on my tablet, where the double top bar plus mobile toolbar really cut into the half of the screen left by the keyboard.

It would be nice to have in desktop too but less important.

Proposed solution

Scroll the top bar(s) out of view when scrolling the page up (moving the text upward and the view downward) and reveal it again when scrolling down. This is a common feature in mobile apps, but my main point of comparison is iA Writer which has the feature on both mobile and desktop. That app also hides the system status bar on mobile, which I’m not requesting.

Here is a demonstration in 1Writer (which unlike iA Writer doesn’t hide the status bar):

https://cdn.discordapp.com/attachments/711427230143742022/1164415223801856010/RPReplay_Final1697688532.mov?ex=6543212f&is=6530ac2f&hm=59497ed5ddd5dea47b599362168ec14a5fbb08d8b4aa72746fabb88c1b141e9b&

An acceptable alternative would be to hide the bar when the keyboard is open, as in the workaround snippet. This works quite well, but is non-standard — I’m not sure if I’ve seen another app do it; the ones I know use scrolling as the trigger. But since Obsidian also doesn’t hide the keyboard in scroll in the standard way either, this would be consistent with that.

Current workaround (optional)

  • A CSS snippet that hides the bar when the keyboard is open. To do it in response to scrolling would apparently require JavaScript, but this is a good substitute. I might even prefer it to the scroll version, but the scroll version is the standard convention.
  • Write in another app when I really want more space.
  • No plugin exists for this that I could find. Hider doesn’t do it. It seems that the required JavaScript wouldn’t be large (there are numerous tutorials online explaining how to implement the technique for websites), so I imagine it wouldn’t be hard for a knowledgeable person to make one.
  • Toggle off Settings > Appearance > Show tab title bar. This is only a very partial workaround — it only hides part of what I want hidden and is inconvenient to switch on and off.

Related feature requests (optional)

Related help threads

Updates

  • 2024-05-21: Added good workaround snippet in comments, linked to it from main post, suggested the technique as an alternate proposal, and changed the title to include it.
3 Likes

Not sure if I fully understand your request. Maybe add some screenshots to show what bars / spacing are in the way.

To gain more space on screen, try following:

  1. install a new keyboard app that allows keyboard resizing and bar configuration (to remove those helper bars for eg numbers, quick emojis, copy-paste options etc). I use Android so i wouldn’t know what keyboard app to suggest for iOs. But some Android keyboard apps are available for multiple systems, eg ms swiftkey, example

  2. Try Dune or other themes which also modify Obsidians mobile gui

Thanks for the suggestions! I added a video to the post. I don’t want to change my keyboard and am reluctant to change my theme, but maybe I’ll check out some themes — I haven’t browsed them in a while.

1 Like

I’d like to second this request. Typing on mobile in landscape mode can be pretty difficult because there’s so little vertices room, so I usually end up using another app for that but my preference would be use Obsidian.

I’m including a screenshot from Obsidian and IA Writer, each in landscape. In IA (and most editors, for what I can tell) the top bar slides out of the way when the keyboard is active, and the thing we’re noticing here is the extra vertical space for text when the top bar is out of the way.

Thanks!

1 Like

It occurred to me that perhaps CSS could hide the bar when the keyboard is open, and @sailKite kindly confirmed that and provided a working snippet! I’ve only just started using it but I think it’s a very nice workaround.

/* Hide top bar when keyboard is open on mobile (includes tab bar on tablet).
Workaround for https://forum.obsidian.md/t/option-to-show-hide-top-bar-s-when-note-is-scrolled/69610?u=cawlinteffid
Courtesy of sailKite https://discord.com/channels/686053708261228577/702656734631821413/1242571258881642547 
Remaining border removed by me. */

.workspace-leaf.mod-active > * > .view-header,
body.is-tablet .workspace-tabs.mod-active > .workspace-tab-header-container {
    transition: height 250ms;

    .app-container:has(.mobile-toolbar) & {
        border-bottom: 0;
        height: 0;
        overflow: hidden;
    }
}