search

efemkay / obsidian-modular-css-layout

CSS Layout hack for Obsidian.md
https://efemkay.github.io/obsidian-modular-css-layout/
GNU General Public License v3.0
918 stars 74 forks source link

List Column first column a little bit lower #64

Closed how2051 closed 9 months ago

how2051 commented 10 months ago

when I write a list column using tag #mcl/list-column, the first column seems to be a little bit lower than the following column, for example:

- ### Example #mcl/list-column
    - xxxxx
    - xxxxx
    - xxxxx
- ### Example
    - xxxxx
    - xxxxx
    - xxxxx
- ### Example
    - xxxxx
    - xxxxx
    - xxxxx

column list

how2051 commented 10 months ago

FYI, other list wont have this issue:

other list

efemkay commented 9 months ago

hey there. sorry for delayed response. when i design List Column i don't think it would be used with headers in list like your example. but for List Grid and List Card that's pretty much sth i expected (use with headers in list).

that said, the remedy is simple enough (which is as per additional code snippet below). however, i'm not planning to implement it for the time being because i'm trying to optimise the MCL performance and excessive usage of CSS :has() does impact the overall performance. if you need in your case, do add the snippet below in your personal css file.

/* remove ul margin top when the first li is a heading */
div > ul:has(> li > [data-heading] > [href*="#mcl/list-column"]) {
    margin-top: 0;
}
how2051 commented 9 months ago

Thank you so much for telling me the detail and solution :)