Split view column width

Hi all, On the latest version. Can the width of the split view columns be adjusted?


The MD view takes too much space. At the end of the day, I'm after the processed view.

If not, how difficult do you think adding that feature would be. Have been planning to contribute to Joplin for some time now. Looking for small ways to contribute first.

Not dynamically or "properly" but yes... kinda? EDIT - see end of post, I'll keep this here anyway in case it is less broken than the other method.
If you add:

.rli-editor > div > div > div > div > div > div > div:nth-child(1) {
    max-width: 35%;
}
.editor-toolbar {
    max-width: 100% !important;
}

to userchrome.css it will resize the first flexbox (containing the md editor) to 35% of the width of its container.
I have no idea how nicely that may or may not play with the new sync scroll feature though (seems to be fine).
(The second rule is to override the first as technically the first one targets both the toolbar as well as the md editor div).

One problem is that it still applies when the layout is switched to "editor only" mode. Not sure if that can be worked around?

EDIT: You can pretty much ignore the above, or not, I ain't your mother. I realised I could, you know, actually use the flex box to do what it is meant to do rather than forcibly constrain it...

.rli-editor > div > div > div > div > div > div > div:nth-child(1) {
    flex: 1 0 0% !important;
}
.rli-editor > div > div > div > div > div > div > div:nth-child(2) {
    flex: 2 1 0% !important;
}
.editor-toolbar {
    max-width: 100% !important;
}

Which then allows the editor and viewer to resize fully when the layout is toggled.
Easiest way to "select" your ratio is to change the first number of the middle rule.
i.e. flex: 2 1 0% will give you a 2:1 ratio of viewer to editor, flex: 4 1 0% will give 4:1 etc.

3 Likes

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