How do I add a full-screen drop-down div beneath the toolbar/menubar?

Notebook
1

The div needs to push down all cells on the screen–when a button is clicked. So it’s pretty much a regular div, nothing special.

Originally, I thought of using a pop-up. but for user friendliness, I prefer a div instead.

2

Have you read through Request for Guidance on Customizing JupyterLab UI Layout yet?

I know that the title says ‘JupyterLab’; however, as spelled out in the section ‘Custom themes in Notebook 7’ of the documentation:

“Creating a custom theme for Notebook 7 follows the same process as creating a custom theme for JupyterLab 4.”

I know that doesn’t really address things either because it sounds like you don’t only want to make a theme, yetI think some aspects are going to overlap.
It sounds like you don’t want just to make a theme, but to make an extension, see:

If you are looking for other extensions to model your specific implementation on, you may like to look at JupyterLab Marketplace (extension catalog): labextensions.dev.

If you were using JupyterLab, there is ipylab that lets you “Control JupyterLab from Python notebooks.”

3

thanks a lot; I appreciate your response. I’m just looking for more precise information since the links are a lot to comb through. tbh I really need short hint on where to start more than general information.

but I’ll go through the links and see what I can piece together

4

Sorry I cannot point you to more precise details. Maybe someone else will have a better idea? …

My understanding is Jupyter Notebook 7+ is built on JupyterLab components and JupyterLab has traditionally not been as directly modifiable as the old notebook (v6.4 and earlier) interface. See here for an related discussion that I think brings up in a different way:

“As an explicit design choice, there are no stock lumino layouts that will create an independently draggable window. Part of this is that it demands a whole separate layer of concerns for keyboard navigation and window layout restoring.
However, an extension has full access to do whatever it needs to the underlying DOM, and as such could basically whatever is needed.”

This reply is mainly my long way of saying to make sure you are looking into resources related to Jupyter Notebook 7+ when trying to understand what you need to do to achieve your goal. There’s a lot out there on the internet for the older notebook interface that doesn’t apply.

5

thank you even more.

so what you’re saying is the new Jupiter notebook is a lot less customizable. if that’s the case, do you think it’s a good idea to possibly jump ship and build something from scratch?

6

just came back to say this has been unbelievably helpful. I am truly shocked by how much details are condensed in your links. thankS!

1 Like