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

Multi-column in multi-column? #43

Closed nucspl closed 10 months ago

nucspl commented 1 year ago

Just tried the snippet today and it's truly a godsend for customization! But as I playing around with how I could go about laying out my dashboard, it seems that I can't stack multi-columns.

A demonstrative callout Just throw this in a new Obsidian note. ``` %%> [!multi-line}%% %%this ruins the layout%% >> [!blank-container] >>> [!multi-column] >>>> [!manifest]- ### Manifest >>>> test >>> >>>> [!tasklist]- ### Backlog >>>> test >> >>> [!projects] ### Projects >>> test ```

The Issue

I wanted to have this kind of layout: image

And have this table to the left: image

But when adding a multi-column callout inside another, it does this instead, and happens regardless of line width: image

efemkay commented 1 year ago

@nucspl [!multi-column] currently cannot have another [!multi-column] (i might change that in future). but for now you can do this trick -- making the [multi-column] a float callout

image

### Standard Table with Float `[!multi-column|float-right-large]` Callout
> [!multi-column|float-right-large]
> 
> > [!NOTE] Title
> > Contents
> 
> > [!NOTE] Title
> > Contents
> 
> > [!NOTE] Title
> > Contents

| Col One | Col two | Col three |
| ------- | ------- | --------- |
| item 1  | item 2  | item 3    |
| item 4  | item 5  | item 6    |
nucspl commented 1 year ago

I see, and it seems to be a cleaner way of doing it too! Thanks! image

Though, things do break without a readable line length override, and the floats appear first on mobile, so stackable [!multi-column]s would still be better. image image

efemkay commented 10 months ago

enhancement released with 0.9.7