Sidebar "no wrap" option and tooltip for notebook and notes titles

LCMadeira · 2022-10-27T21:34:03.321Z

Right now we need to enlarge the sidebar so we could read big note names. Something that wastes the possibility given by the note names not being the file name (which is an ID) and forever working note links.
I think it would be nice to have a built-in alternative to the display of title in the sidebar, both in PC and Android (possibly mobile as I don't know how it goes on iOS.)

I managed to change it to a "no wrap" display but it took some time to be sure it would work regardless of the current theme.

The other feature would be a tooltip with the notebook/note name when hoovered or when pressed and hold in the phone.

I would also know your workaround ways to deal with this.

/* note sidebar */

.item-list.note-list > div {
    min-height: 34px;
    height: auto !important;
    padding-top: 8px;
    padding-bottom: 8px;
}

.item-list.note-list > div:empty {
    padding: 0px !important;
    min-height: auto;
}

.item-list.note-list > div > a{
    white-space: break-spaces !important;
    padding-left: 7px !important ;
}



/* notebook sidebar */

.list-item-container {
    height: auto !important;
    min-height: 30px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.folders.expanded > div > a {
    white-space: break-spaces;
}

span.title {
    line-height: unset !important;
}

stevemagruder · 2023-01-25T22:25:59.506Z

A tooltip on hover over long notebook/note names would be nice. I was going to ask for that at some point myself.

Does anyone know if there a plugin possibility for either of these feature ideas?

tomasz86 · 2023-02-05T16:19:27.118Z

I've experimented a lot with unlimited height and wrapped notebook and note titles, however while notebooks aren't much of a problem, there is some JavaScript interference going on when it comes to the note list.

For example, with the code presented in this topic, it becomes impossible to scroll down a long note list that shows a scroll bar. No matter how much you try to scroll down, the list will keep moving back to the top. I've experienced the exact same problem with my own CSS as well.

Another issue that I've had with a different approach was that while the note list itself was scrollable, its bottom part would become unavailable, which resulted in the list using only part of the screen. Lastly, with my final approach, the note list appeared to be working properly, however the very last note would become invisible until the arrow down key was pressed on the keyboard to move to it.

Overall, I've personally given up on this one. It would still be great if someone came up with a bulletproof solution, but I'm assuming that CSS alone won't be enough. The underlying JS likely needs to be tweaked to allow note automatic height which currently doesn't appear to be the case.

PaulS · 2023-08-21T18:54:46.084Z

@tomasz86 Wrapped note titles would also be a very crucial feature to me, just as they are implemented in the mobile clients. However my CSS attempts were not successful either.

Your "final approach" (where only the last entry has to be shown manually) already sounds like a pretty viable solution. Could you maybe share the CSS code here? Thank you...

tomasz86 · 2023-08-29T16:36:07.436Z

I'm sorry for a late reply. I've had to find the old code and re-test it.

Ideally something like this should be the solution:

.note-list > .list-item-container {
	height: auto !important;
	line-height: 1.5 !important;
	min-height: 32px !important;
}
.note-list > .list-item-container > a {
	padding-bottom: 7px !important;
	padding-right: 16px !important;
	padding-top: 7px !important;
	white-space: normal !important;
	word-break: break-word !important;
}

It wraps and displays note titles in whole. However, the problem is that doing so causes weird problems with scrolling the note list. With some notebooks it works, but when there are a lot of notes with their text wrapped, the scrollbar simply gets stuck in the middle, and you're unable to scroll the note list down at some point .

Because of the above, the "final approach" was to limit the number of displayed lines to two or three as below.

.note-list > .list-item-container {
	height: auto !important;
	line-height: 1.5 !important;
	max-height: 50px !important;
	min-height: 32px !important;
}
.note-list > .list-item-container > a {
	padding-bottom: 7px !important;
	padding-right: 16px !important;
	padding-top: 7px !important;
	white-space: normal !important;
	word-break: break-word !important;
}
.note-list > .list-item-container > a > span:first-child {
	height: 100% !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

This limits the number of lines to two which is calculated by adding the font size with 1.5 line height (12px + 6px = 18px) and padding (7px + 7x = 14px), and then the second line (12px + 6px = 18px), leading to min-height: 32px and max-height: 50px. If you wanted to show more lines, then the code would be max-height: 68px for three lines, and so on.

This method seems to work fine for most notebooks, but for some I did experience the last item not being shown unless you used the arrow down key to move the note list to the very bottom, which would eventually reveal the last note. The main problem for me was that I didn't even know that the last note was there before doing the arrow down scroll, hence I stopped using it.

PaulS · 2023-09-14T19:25:16.593Z

@tomasz86 Thanks for sharing your code! Looks quite good, however I noticed that on some notebooks with many todo list items there are problems as they are displayed with extra vertical space.

This can be prevented with the following extended variant:

.note-list > .list-item-container,
.note-list > .list-item-container > div,
.note-list > .list-item-container > .todo-list-item {
	height: auto !important;
	line-height: 1.5 !important;
	max-height: 50px !important;
	min-height: 32px !important;
}

.note-list > .list-item-container > a,
.note-list > .list-item-container > .todo-list-item > a {
	padding-bottom: 7px !important;
	padding-right: 16px !important;
	padding-top: 7px !important;
	white-space: normal !important;
	word-break: break-word !important;
}

.note-list > .list-item-container > a > span:first-child {
	height: 100% !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

However, there are still issues with flickering scroll bars or missing lines at the end of the list in some notebooks.

system · 2024-09-08T19:26:02.113Z

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