Pluto: Table of Contents´ position

General Usage
1

Hi,

Does anyone know how to force the Table of Contents to be kept at a fixed distance from the main body of the Pluto window? When we change the size of the browser’s window, the Table of Contents can overlap with Pluto’s main body or be too far away from the main body.

Thanks

2

I don’t really understand what you want to happen. Where should the TableOfContents go when the window gets too small?

In principle you can fully control the CSS of everything just be making a Pluto cell and writing something like this (example makes the cells wider which I occasionally use):

html"""
<style>main {max-width: 60%}</style>
"""
3

@abraemer, thanks. I need to avoid the Table of Contents overlapping with Pluto’s main window when we make the browser’s screen bigger. The notebooks are for teaching, and frequently, we have to increase the size of what is displayed.

I borrowed from @steffenPL a piece of code that solves the problem:

html"""
<style>
      @media screen {
            main {
                  margin: 0 auto;
                  max-width: 2000px;
            padding-left: max(100px, 10%);
            padding-right: max(383px, 10%); 
            # 383px to accomodate TableOfContents(aside=true)
            }
      }
</style>
"""

Thanks.

4

You may also take a look at this thread and repository.