Cell width in Pluto Notebook

I’ve changed from Jupyter to Pluto notebook a couple months ago, and so far I’m having a very nice experience with it. But sometimes, when I plot some results to show my students, I would like to have a wider cell. Is there any easy way to increase the cell width in Pluto notebooks?

2 Likes

I saw the following somewhere and it works for me… Put this in a cell…

html"""<style>
main {
    max-width: 1900px;
}
"""
18 Likes

This increases the size of the cell only from the left side, the free space in the right side remain the same.
Can the size be increased from both the sides?
My pluto version is: Pluto v0.14.2

Thank you in advance!

1 Like

This works pretty well for me. It also caps the cell width by 90% of screen width.

using HypertextLiteral

@bind screenWidth @htl("""
	<div>
	<script>
		var div = currentScript.parentElement
		div.value = screen.width
	</script>
	</div>
""")

begin
	cellWidth= min(1000, screenWidth*0.9)
	@htl("""
		<style>
			pluto-notebook {
				margin: auto;
				width: $(cellWidth)px;
			}
		</style>
	""")
end
6 Likes

I am getting UndefVarError: @htl not defined - please advise.

This is an even better solution:

html"""
<style>
	main {
		margin: 0 auto;
		max-width: 2000px;
    	padding-left: max(160px, 10%);
    	padding-right: max(160px, 10%);
	}
</style>
"""
8 Likes

Works like a dream - thanks!

Is there a way to have Pluto automatically add a cell with this when I open a notebook?

1 Like

Perfect indeed, thanks!

See [ANN] PlutoStyles.jl: override styles of Pluto notebooks for applying styles to all notebook without modifying their files.
disclaimer: my package