How do I align my object center and keep the width responsive?

Panel
1

My Pain

I’m trying to develop v2 of awesome-panel.org and I would like my main item to

1, center
2. expand to a max width of 1140px.

I’ve tried all that I can think of

  • css in the template (Does not work well with bokeh layout engine)
  • different kinds of Panel layouts and spacers

but I cannot get it working.

I hope someone can help.

Additional Context

I will provide more context in by posting some examples of what does not work below.

2

This is an example where my main object is a Column.

I set the width=1140px and sizing_mode="stretch_height" and place it inside a row with a Spacer on both side pn.Row(pn.Spacer(), main, pn.Spacer())`

It works when the window size is larger than 1140px but not for smaller screens as the main column keeps it width of 1140px.

fixed_width
fixed_width1707×1344 7.74 MB

1 Like
3

I managed to get something working. It took some time and I needed a trick with a Spacer to get it working. So I want to share it here.

fixed_width
fixed_width1599×542 898 KB 

import panel as pn
pn.config.sizing_mode="stretch_width"

MAX_WIDTH=1140

spacer = pn.Spacer(height=10, background="blue", margin=0)
main_content = pn.Column(
    "Example 3 "*100, 
    sizing_mode="stretch_width", 
    max_width=MAX_WIDTH, 
    background="green", 
    align="center" # WHY I SHOULD set align="center" here and not on main_area confused me
)
main_area = pn.Column(
    spacer, # TRICK: WONT WORK WITHOUT. YOU CAN SET HEIGHT TO 0 TO NOT TAKE UP HEIGHT
    main_content,
    sizing_mode="stretch_both",
    background="lightgray",
)

main_area.servable()
4 Likes
4

And here is how to original looks with the solution.

max_width_responsive_works
max_width_responsive_works1582×884 3.82 MB

5

Thanks for sharing! I’m wondering if panel can have a built-in version of this, like pn.CenteredColumn or something.

Align always confused me as well.

1 Like