How to select certain elements

Lounge
1

@uxamanda I’m really bad with css, maybe you can help me out.

Until now I have changed the Joplin code to get rid of the lines in the note list, since I build my own version with a few tweaks anyway. But after I saw your css magic, I think this could be done with changes to the userchrome.css as well.

It’s under the div class="item-list note-list" node, but only the divs that start with class-"width:. There I could change the height and remove the border-bottom attribute.
Unfortunately I have no idea how to select those divs.

I think it should be something like: react-root > something here > some:child there* but in reality I have no clue.

2

Hey @tessus, no problem.

Does adding this to userchrome.css solve your issue?

.note-list div {
   border-bottom: 0 !important; 
}

Before:
before

After:
after

3

Thank you very much for the reply.

Yes, it works for removing the lines, but when I try to change the height it gets weird:

  1. it creates an extra gap
  2. of 55 notes in the folder, only 27 are shown and no scrollbar

image

I think the first <div> (and last <div>) under the node note-list must not be changed. Or is there a way to select that first/last div and override it?

4

Well, that was an adventure! :slight_smile:

Turns out there is fancy javascript that is handling that scroller, it isn't a normal list. So as you scroll, the items are being replaced instead of actually scrolled. This is why there is an extra div with height: 0 at the top. That div changes height as you scroll, so it messes things up if you change it's height. It is possible to prevent that div from being affected with CSS with:

.note-list > div:not(:first-child)

(This says, in .note-list choose all the children that are divs (but not their child divs) > div as long as they are not the first-child :not(:first-child)... CSS is weird)

The problem is that even though we can then apply the height to all the rest of the divs, changing the height of the other items still messes up the javascript scrolling.

The best workaround I found was adding margin to the items:

.note-list > div:not(:first-child) {
    margin: 11px 0;
    /*adds margin of 11px to top and bottom, but not to the left and right*/
    border: 0 !important;
}

.note-list > div:not(:first-child) div {
    padding-right: 10px;
    /*adds padding to the right if there is a checkbox, just aesthetic*/
}

This seems to work ok, but if I added any more margin, it made the javascript scroller super jittery as it is trying to recalculate. If you see that, you might try reducing the margin some.

taller list items

5

Wow, ok. So I think we need a class for that too. (I’ll add it to the list.) The marging only allows extra space, but not to reduce the height of the item. It’s currently 34px, but without the lines 30px looks much better. And if it’s really jittery, it makes no sense to use it.

What about the last item? It’s also the same as the first. Would something like this work?

.note-list > div:not(:first-child,:last-child)

Anyway, don’t waste any more time on this. There are apparently elements that really do require a proper class…

6

Ah got it, thought you were making it taller, not shorter.

The selector you’d want is:
.note-list > div:not(:first-child):not(:last-child)
but changing the height there makes the scroll area short / jittery.

I don’t think a class would help here, since it is the javascript scrolling / resize magic that is the issue. I think you’d have to change the height in the JS to get the math right.