Pluto: how to increase the width of "Live docs"

Tooling Pluto
1

I found here how to increase the width and the height of output cells in Pluto:

<style>main {max-width: 1000px;}</style>
<style>pluto-output.scroll_y {max-height: 2000px;}</style>

I tried to find out how to increase the width of the “Live docs” window.
I did it in Google Chrome with the developpers tools.
I tried many items, but could not find the proper item to control the width.

Any suggestion about this?

Thanks

Michel

2

This should work, I think:

pluto-helpbox {
    width: 50vw;
}

here 50 is the percentage of total page width.

3

Thanks, this work!

Can’t understand why it didn’t work with “max-width”, but ok I am not a specialist, not even a beginner.

I had a look at index.css from Pluto on GitHub.
To see what else I could do to improve my user-experience with Pluto.

I will post another question, maybe, about how to modify the layout of Pluto.

I would like:

  • to move all the cells to the left as much as possible.
  • to have “Live docs” as much as possible to right
  • eventually to have “Live docs” popping from right to left instead of bottom-up
  • eventually to have “Live doc” occupy the full screen on the right, from top to bottom

If you had any suggestion or comment, again I would appreciate!

Michel

4

I personally didn’t go into that much depth regarding pluto visual appearance. This is what I currently have in my browser user CSS:

<my-pluto-hostname>##main:style(max-width: calc(100% - 2em) !important; margin-left: 1em !important; margin-right: 1em !important)
<my-pluto-hostname>##jltree img:style(max-width: none !important; max-height: none !important)
<my-pluto-hostname>##jltree.collapsed img:style(max-width: 15rem !important; max-height: 15rem !important)

This makes cells code and output to take the full width of the browser window and increases the size of output images (plots) when there are several of them in a single cell.
Maybe this snippet will be helpful to craft the customizations you want. I didn’t look into index.css or other files at all and solely relied on devtools in my browser. Btw, I found Pluto easier to customize compared to the current jupyter.

1 Like
5

Hello all,
I am new to inspecting pages and editing things, I didn’t even realize it was possible. Where are you inputting these commands? I would love to do your simple pluto-helpbox fix, but can’t find anything.
Thanks!

6

Just run a cell with this code:

html"""<style>
pluto-helpbox {
    width: 50vw;
}
"""

See also Modify right margin in Pluto notebook - #3 by pankgeorg

3 Likes
7

Unfortunately that didn’t seem to work. I copied it and put it in the cell right below my package declarations and ran it and nothing happened. I assume the 50 is for 50% of the view window, I changed that around too and nothing changed. Could it be my browser (Vivaldi)?
Thanks for the help!

8

I copied it and put it in the cell right below my package declarations and ran it

The position does not matter here, and it looks like your steps are fine.
I also tried to paste the code above (just like you did) and it works here.

assume the 50 is for 50% of the view window,

That seems correct too.

Could it be my browser (Vivaldi)?

Indeed; firefox 115.1.0esr here.