Add horizontal scrollbar for file list

Custom CSS & Theme Design
1

image

1 Like
2

Do you mean a horizontal scroll bar?

You should be able to add one (or to make the text wrap) with a CSS snippet. If you search the forum I think you may find one you can adapt.

1 Like
3

I think this should be supported officially rather than let user do such a “dirty” work…

1 Like
4

can you update the title of your FR? a bit confusing with “vertical”

5

I’m just saying, here’s something you could do in the meantime.

Also, if they do anything I’d personally prefer they wrap the text. The old default theme had horizontal scrolling and it degrades the vertical scrolling experience with unintended sideways movement.

6

Sorry, yes.

7

I’m one of those who want a horizontal scrollbar too.
I would like an option to switch the horizontal scroll bar ON/OFF in the official.
Currently, the following CSS is added to use the horizontal scrollbar.

.nav-files-container {
  overflow-x: auto;
}

.nav-file-title, .nav-folder-title {
  width: max-content;
}
3 Likes
8

Thanks, also again: I think this should be supported officially rather than let user do such a “dirty” work…

9

This works perfectly! Better than what I came up with.

10

Use case or problem

When there is a deep tree hierarchy in the file explorer, the text wraps and doesn’t show the file or folder title.

I want to be able to have a deep tree hierarchy that I can see the folders and files to.

Proposed solution

Make a way to scroll horizontally when the text of a file or folder in file explorer overflows, instead of wrapping the text.

There was a post in help but it didn’t get a fix.

Thanks

11

Could we merge your feature request with this one:

https://forum.obsidian.md/t/add-horizontal-scrollbar-for-file-list/46370

or are you talking about something different?

1 Like
12

I don’t know what you mean by merge. Should I delete this thread?

The solution worked. Thank you so much. I thought I searched for it but didn’t find that thread. This is what I came up with and it didn’t work on mobile:

.nav-files-container {
overflow-x: auto;
}

.nav-folder-title-content, .nav-file-title-content {
text-overflow: none;
–nav-item-white-space: nowrap;
overflow-x: visible;
}

I tried this and it worked on mobile:

.nav-files-container {
overflow-x: auto;
}

.nav-file-title, .nav-folder-title {
width: max-content;

13

This still works great, thanks!