Notebook's checkpoint/autosave notification message with zoomed-in browsers

[Kyle Rawlins]

Here's my current biggest minor notebook annoyance: Often when I project a notebook (e.g. when teaching) I have the browser zoomed in to make things more readable for the audience. When the zoom level is high enough, whenever the saving/autosaving box shows up, it forces a linebreak in the menu line. This momentarily shifts everything in the rest of the browser window, and is quite disorienting to the audience (and me).  I'm often projecting stuff that uses a custom kernel with a relatively long name, compounding things.  With a default python 3 kernel, I can replicate this problem by manually saving in a fullscreen firefox browser on a recent macbook pro screen at 200% zoom, and with my custom kernel (whose name is: "Lambda Notebook (Python 3)") it only takes 150% zoom. The problem is exacerbated if I'm connecting to a low resolution projector, so I'm guessing even people not using a long-named kernel have occasionally run into this.

Does anyone have any tips/workarounds for this? Is there a way to disable the UI saving notifications? Disabling autosave isn't my preferred solution.

A related question is if there's a way to zoom only the notebook body, e.g. browser zoom without affecting the menu/toolbar/title sizes. The whole menu area tends to take up more real estate than it's worth at higher zoom levels, and that would solve the specific autosave problem as well.

Thanks for any help,
-kyle

[Matthias Bussonnier]

Hi Kyle, 

What I can suggest is to modify your custom.css

$ cat ~/.jupyter/custom/custom.css

div#notification_notebook {

    width:0;

    overflow: hidden;

}

for example this should make the save notification quasi invisible.

You can inject any css you like in there, and that will affect the notebook rendering. 

You can for example use the non-standard `zoom` property according to MDN:

https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

```

#notebook_panel {

    zoom: 120%;

}

```

Or play with `transform: scale(1.2);`

The way to figure that out is to learn how to play with Chrome/Firefox inspector, modify things, and when you have something you like bring them in custom.css.

It's likely possible to write an extension that adds a toggle.

I would have a look at https://github.com/ipython-contrib/jupyter_contrib_nbextensions that may give you inspirations. 

-- 

Matthias

--
You received this message because you are subscribed to the Google Groups "Project Jupyter" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter+unsubscribe@googlegroups.com.
To post to this group, send email to jup...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/746dd94a-1aa1-4f13-9950-28d293e992f2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Kyle Rawlins]

Thanks for the response, this CSS works for what I need. I also found the hide_heades nbextension in the contrib repository (https://github.com/ipython-contrib/jupyter_contrib_nbextensions/tree/master/src/jupyter_contrib_nbextensions/nbextensions/hide_header, it just hides the entire header area on a keyboard shortcut).  I suspect that it'll work even better for zoomed-in projection than trying to mess with the zoom level in a complicated way would.

Best,
-kyle

To unsubscribe from this group and stop receiving emails from it, send an email to jupyter+u...@googlegroups.com.

[Kyle Rawlins]

Just to add to this now that I've played with jupyterlab a bit: for anyone else who was wondering about zooming, its "presentation mode" seems to be doing exactly what I was looking for with respect to zoom levels, and I think is going to be great for this use case.

Best,
-kyle