Removing the header bar

Panel
1

Hi,

I am looking to remove the header of one of the template I am using. I understand that there are a lot of dependancies across the different elements and it makes sense that removing the header directly in the HTML file is not the way to go. I was wondering if this was possible using an existing template or if I had to build another from scratch.

Thank you for your time.

2

Right now thereā€™s no easy way to drop the header but if you file an issue it should be a whole lot of effort to allow users to disable the header on existing template.

3

Makes sense. The reason that I am trying to do that is that I have a lot of trouble trying to apply the css classes position: fixed on some dashboards elements and the sidebar appears to support it quite nicely.

Do you have any documentation or help regarding creating oneā€™s own template ? Or should I just build a really simple html page that stores the css classes that I need and the different objects ?

4

Interesting, I found in an old thread that I could add the following class
{ position: fixed !important} and it seems like it overrides bokeh/panel fixed css classes. I think it might do the trick for now.

1 Like
5

Iā€™d like to remove the header from the bootstrap template Iā€™m using. So I was wondering if there was any update on how to do this from this old discussion.

For anyone interested the reason is that I want to call the template from another website using and iframe and Iā€™d like to just have the 9 tabs show up, and perhaps the sidebar.

6

Hi- are there any updates to this? Is it possible to remove the blue title bar (Iā€™m using the VanillaTemplate)? Thanks!

7

No thereā€™s no update yet, but thereā€™s an open PR that is stale

8

As a workaround you can use css

DISABLE_HEADER_CSS = """
nav#header {
    display: none;   
}
"""

pn.extension(raw_css=[DISABLE_HEADER_CSS])

A full example would look like

import hvplot.pandas
import numpy as np
import panel as pn
import pandas as pd

DISABLE_HEADER_CSS = """
nav#header {
    display: none;   
}
"""

pn.extension(raw_css=[DISABLE_HEADER_CSS])

xs = np.linspace(0, np.pi)

freq = pn.widgets.FloatSlider(name="Frequency", start=0, end=10, value=2)
phase = pn.widgets.FloatSlider(name="Phase", start=0, end=np.pi)

def sine(freq, phase):
    return pd.DataFrame(dict(y=np.sin(xs*freq+phase)), index=xs)

def cosine(freq, phase):
    return pd.DataFrame(dict(y=np.cos(xs*freq+phase)), index=xs)

dfi_sine = hvplot.bind(sine, freq, phase).interactive()
dfi_cosine = hvplot.bind(cosine, freq, phase).interactive()

plot_opts = dict(responsive=True, min_height=400)

# Instantiate the template with widgets displayed in the sidebar
template = pn.template.VanillaTemplate(
    title='VanillaTemplate',
    sidebar=[freq, phase],
)
# Append a layout to the main area, to demonstrate the list-like API
template.main.append(
    pn.Row(
        pn.Card(dfi_sine.hvplot(**plot_opts).output(), title='Sine'),
        pn.Card(dfi_cosine.hvplot(**plot_opts).output(), title='Cosine'),
    )
)

template.servable();

image
image1692Ɨ723 49 KB