Move header in template to the right?

Panel
1

I have a template app like the following where I want to move the header to the right, so it is next to the switch. Is there a way to do this?

import panel as pn

pn.template.FastListTemplate(
    title="Example",
    header="Can this be moved to the right?",
).servable()

2021-09-14 17_31_36
2021-09-14 17_31_361179×561 12.1 KB

2

Hi @Hoxbro . There is nothing built in. But here is what I would try.

  • remove the title. Append Spacer() and pn.pane.Markdown to the header or
  • keep title and try to use some css to fix this.

UPDATE: Disregard this comment. I thought it was the title you would like to move right. See post below instead.

3

Something like

import panel as pn
from panel.pane.markup import Markdown

pn.template.FastListTemplate(
    title="Example",
    header=[pn.Row(pn.pane.Markdown("Can this be moved to the right?"), pn.layout.HSpacer(), pn.pane.Markdown("Yes it can!"), sizing_mode="stretch_width")]
).servable()

image
image2076×992 77.6 KB

1 Like
4

Marc you’re awesome this is exactly what I needed. Thank you!

1 Like
5

You’re not bad either @Hoxbro :+1:

1 Like