Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Header area not showing #7279

Closed
jtpio opened this issue Sep 29, 2019 · 10 comments · Fixed by #8059
Closed

Header area not showing #7279

jtpio opened this issue Sep 29, 2019 · 10 comments · Fixed by #8059
Labels
pkg:application status:resolved-locked
Milestone

Comments

@jtpio
Copy link
Member

@jtpio jtpio commented Sep 29, 2019

Description

The header area doesn't seem to be shown when adding widgets to it from a third-party extension.

Reproduce

Example code:

function activate(app: JupyterFrontEnd) {
  let logo = new Widget();
  logo.addClass('jp-MainAreaPortraitIcon');
  logo.addClass('jp-JupyterIcon');
  logo.node.style.height = "28px";
  logo.id = 'jp-MainLogo-header';
  app.shell.add(logo, 'header');
};

Or at: https://github.com/jtpio/potatoes/blob/421fdafe8658df1a3d7eb2a6b9c446ea16cce855/header-logo/src/index.ts#L13-L20

Expected behavior

image

Actual behavior

image

Context

  • Operating System and version: Ubuntu 19.04
  • Browser and version: Firefox 69
  • JupyterLab version: 1.1.4
@jasongrout jasongrout added this to the Future milestone Mar 19, 2020
@meeseeksmachine
Copy link
Contributor

@meeseeksmachine meeseeksmachine commented Mar 19, 2020

This issue has been mentioned on Jupyter Community Forum. There might be relevant details there:

https://discourse.jupyter.org/t/plugin-extension-development-adding-a-widget-to-header-area-of-jupyterfrontend-ishell-does-not-make-the-area-visible/3682/5

@jasongrout
Copy link
Contributor

@jasongrout jasongrout commented Mar 19, 2020

The reason the top bar shows up is that we explicitly set a min height for it:

min-height: var(--jp-private-menubar-height);

@meeseeksmachine
Copy link
Contributor

@meeseeksmachine meeseeksmachine commented Mar 19, 2020

This issue has been mentioned on Jupyter Community Forum. There might be relevant details there:

https://discourse.jupyter.org/t/plugin-extension-development-adding-a-widget-to-header-area-of-jupyterfrontend-ishell-does-not-make-the-area-visible/3682/6

@jasongrout
Copy link
Contributor

@jasongrout jasongrout commented Mar 19, 2020

So, it looks like you could follow what the top area does and just set a min-height for the jp-header-panel:

#jp-header-panel {
  min-height: 30px; /* or whatever */
}

That isn't a very satisfying solution, but will work with what we have now. For the future, I suggest we change the header to a box panel, like the bottom area is already, and then you'd be able to just set a min-height for the widget you are adding, and the header will automatically see that and adjust its size to fit it.

jasongrout added a commit to jasongrout/jupyterlab that referenced this issue Mar 19, 2020
This makes it similar to the bottom panel, and means widgets can set their min-height and the header region will adjust to accommodate it.

Fixes jupyterlab#7279
@jasongrout
Copy link
Contributor

@jasongrout jasongrout commented Mar 19, 2020

For the future, I suggest we change the header to a box panel, like the bottom area is already, and then you'd be able to just set a min-height for the widget you are adding, and the header will automatically see that and adjust its size to fit it.

I did this in #8059.

@meeseeksmachine
Copy link
Contributor

@meeseeksmachine meeseeksmachine commented Mar 19, 2020

This issue has been mentioned on Jupyter Community Forum. There might be relevant details there:

https://discourse.jupyter.org/t/plugin-extension-development-adding-a-widget-to-header-area-of-jupyterfrontend-ishell-does-not-make-the-area-visible/3682/7

@machafulla
Copy link

@machafulla machafulla commented Mar 20, 2020

So, it looks like you could follow what the top area does and just set a min-height for the jp-header-panel:

#jp-header-panel {
  min-height: 30px; /* or whatever */
}

That isn't a very satisfying solution, but will work with what we have now. For the future, I suggest we change the header to a box panel, like the bottom area is already, and then you'd be able to just set a min-height for the widget you are adding, and the header will automatically see that and adjust its size to fit it.

I understand that this would fix the issue, but I don't know how to do this from the application plug-in extension. I can see that e.g. #jp-bottom-panel is defined in <jupyterlab_1.2.6>\packages\application\style\base.css, and there's no definition for #jp-header-panel... can I just set #jp-header-panel as you say somewhere in the extension and it would be used? I have seen that there are extensions to modify the JupyterLab theme... maybe I should take a look at those 😀

In any case, thanks for the explanations so far!

@meeseeksmachine
Copy link
Contributor

@meeseeksmachine meeseeksmachine commented Mar 20, 2020

This issue has been mentioned on Jupyter Community Forum. There might be relevant details there:

https://discourse.jupyter.org/t/plugin-extension-development-adding-a-widget-to-header-area-of-jupyterfrontend-ishell-does-not-make-the-area-visible/3682/8

@machafulla
Copy link

@machafulla machafulla commented Mar 20, 2020

For the future, I suggest we change the header to a box panel, like the bottom area is already, and then you'd be able to just set a min-height for the widget you are adding, and the header will automatically see that and adjust its size to fit it.

I did this in #8059.

That was a very near future indeed!

@machafulla
Copy link

@machafulla machafulla commented Mar 20, 2020

I understand that this would fix the issue, but I don't know how to do this from the application plug-in extension. I can see that e.g. #jp-bottom-panel is defined in <jupyterlab_1.2.6>\packages\application\style\base.css, and there's no definition for #jp-header-panel... can I just set #jp-header-panel as you say somewhere in the extension and it would be used? I have seen that there are extensions to modify the JupyterLab theme... maybe I should take a look at those 😀

In any case, thanks for the explanations so far!

Yes that did it! 🎉

@github-actions github-actions bot added the status:resolved-locked label Feb 10, 2021
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 10, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
pkg:application status:resolved-locked
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants