How to define spacing using Spacer(), VSpacer() or HSpacer()

I want to introduce some vertical space in my Holoviz panel. I tried using pn.layout.VSpacer(), but the inserted space is too large. I was not able to find the argument that adjust the space.

In particular, I tried pn.layout.VSpacer(height=10), but the height argument does not adjust the space. What argument does adjust the space?

The following works for me:

import panel as pn; pn.extension()
import holoviews as hv; hv.extension('bokeh')
h = hv.Curve([1,3,8,-1,2]).opts(width=200,height=150, xticks=3, yticks=3)
pn.Column(pn.Row( h, pn.Spacer(width=80), h),
          pn.Row( h, pn.Spacer(width=10), h))


pn.Column(pn.Row( h, pn.Spacer(width=80), h),
          pn.Row( h, pn.Spacer(width=10), h))```


As eat42gh indicates, for

  • FIXED spaces use: pn.Spacer()
  • RESPONSIVE spaces use pn.HSpacer() and pn.VSpacer()

If you’re new to Panel it’s worth to read through how layout and sizing of components work:

Out of the box most of the stuff is dynamic, using the space available. You can change this with the “sizing_mode” or in addition restrict sizes with min_height, max_height, min_width, …

So if you want a flexible space within some limits you can also do things like following. Play with the min_width/max_width to see how it affects the Space and the Button-width as you change the width of your browser.

import panel as pn
    pn.widgets.Button(name='Button1', sizing_mode='stretch_width'), 
    pn.HSpacer(min_width=200, max_width=300),
    pn.widgets.Button(name='Button2', sizing_mode='stretch_width'))

Over time I learned not to manual hardcode too much because it can become confusing pretty quickly and the default layout stuff is pretty good.

  • Plots are usually fixed size anyway
  • and I only hardcode fixed sizes or ranges for widgets or other elements I really need a certain way.