Title: How to reduce the height of the sidebar and note list items in portable version 3.2.13?

Features
1

Hi, I'm using the portable version of Joplin 3.2.13, and I have a couple of questions regarding layout customization:

When I launch Joplin, I would like to reduce the height of the notebook list items in the sidebar. Is there a way to do this?

I also want to reduce the row height of the note list in the middle pane. I’d like to make the entire note list view more compact so that more notes can fit on the screen at once.
Is there any way to achieve this?

Thanks in advance for your help!

2

"zoom in" and "zoom out" like workaround ?

3

For reducing the height of notebook list items, refer to this thread: Dead area at the bottom of notebook list when trying to condense spacing using CSS

For reducing the height of note list items, apply this CSS to userchrome.css with your desired item height (and item font height as needed):

.note-list-item-wrapper, .note-list-item {
  height: 30px !important;
}

.note-list-item span {
  font-size: 12px; 
}

Reducing note list item height may cause dead space at the bottom of the list as described here:

1 Like
4

userchrome.css
Tools > Options > Appearance > Show advanced setings > Custom Stylesheet fot Joplin-Wide app styles

image
image664×727 58.5 KB

5

Reducing note list item height may cause dead space at the bottom of the list

Not only... There are many strange behaviours.

.note-list-item-wrapper, & {
  height: 10px !important;
}

=>

image
image470×383 16 KB

image
image470×385 21.5 KB

image
image395×248 15.7 KB

image
image684×231 58.1 KB

Besides when the height is fixed with CSS, zoom in and zoom out can't change the bad display...

6

Updated my prior post with working CSS.

1 Like