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
6

I found this thread via Google, but the above solution does not appear to be working anymore. There is now an easier option with FlexBox, although I couldn’t find this specific pattern clearly documented. Here is an updated example:

import panel as pn

pn.extension(sizing_mode="stretch_width")

MAX_WIDTH = 800

main_content = pn.Column(
    "example " * 100,
    margin=(10, 50),
    max_width=MAX_WIDTH,
    styles={'background': 'lightgreen'},
)
main_area = pn.FlexBox(
    main_content,
    justify_content="center",
    styles={'background': 'lightgrey'},
)

main_area.servable()

This was tested with the following versions:

bokeh==3.8.0
panel==1.8.1
1 Like
7

Amazing!