Center pane in panel with spacers on the sides

Panel
1

Is there a way to make the center panel stretch 3/5 of the width (up to the red lines) with blank space 1/5 on each side?

image
image1434×777 10.6 KB 


col = pn.Column(
    '# Test Center',
    pn.widgets.Button(name='Click me!', sizing_mode='stretch_width'),
    sizing_mode='stretch_width'
)

pn.Row(
    pn.Spacer(sizing_mode='stretch_width'),
    col,
    pn.Spacer(sizing_mode='stretch_width')).servable()
2

This also doesn’t seem to work:

image
image1434×261 1.15 KB 

col = pn.widgets.Button(name='Click me!', sizing_mode='stretch_width', align='center', max_width=500)
pn.Row(col, sizing_mode='stretch_width').servable()
3

Hi @ahuang11

The strategies I see are

Fixed size margin

  • use margin parameter or
  • use a spacer

Percentage size margin

  • Gridbox or
  • GridSpec or
  • Custom Css or
  • Custom Template with custom Css.

So there are many ways.

4

Here are some potential solutions @ahuang11

image
image1291×289 9.93 KB

image
image1291×289 11.2 KB

image
image1291×745 16.2 KB 

import panel as pn


def get_content(title="App Title"):
    return pn.Column(
        "# " + title,
        pn.widgets.Button(name="Click me!", sizing_mode="stretch_width"),
        sizing_mode="stretch_width",
        background="lightgray",
    )


def app_body_margin_css():
    css = """
        body {
            margin-top: 0px;
            margin-bottom: 0px;
            margin-left: 20%;
            margin-right: 20%;
        }
    """
    pn.config.raw_css.append(css)
    content = get_content("App Body Margin CSS")
    return content


def app_margin():
    content = get_content("App Margin")
    content.margin = (0, 100, 0, 100)
    return content


def app_gridspec():
    gspec = pn.GridSpec(sizing_mode="stretch_width")
    gspec[:, 0] = pn.Spacer()
    gspec[:, 1:4] = get_content("App GridSpace")
    gspec[:, 4] = pn.Spacer()
    return gspec


app_body_margin_css().show()
1 Like
5

Thank you for your comprehensive reply!

Curious why this didn’t work though since align=‘center’.

col = pn.widgets.Button(name='Click me!', sizing_mode='stretch_width', align='center', max_width=500)
pn.Row(col, sizing_mode='stretch_width').servable()
6

I think the align keyword is only relative to the other Panes in the respective column or row.

1 Like