import panel as pn pn.extension()
Column layout allows arranging multiple panel objects in a vertical container. It has a list-like API with methods to
__setitem__, which make it possible to interactively update and modify the layout.
objects(list): The list of objects to display in the Column, should not generally be modified directly except when replaced in its entirety.
scroll(boolean): Enable scrollbars if the content overflows the size of the container.
scroll_position(int): Current scroll position of the Column. Setting this value will update the scroll position of the Column. Setting to 0 will scroll to the top.”””
auto_scroll_limit(int): Max pixel distance from the latest object in the Column to activate automatic scrolling upon update. Setting to 0 disables auto-scrolling
scroll_button_threshold(int): Min pixel distance from the latest object in the Column to display the scroll button. Setting to 0 disables the scroll button.”””
view_latest(bool): Whether to scroll to the latest object on init. If not enabled the view will be on the first object.”””
Column layout can either be instantiated as empty and populated after the fact or using a list of objects provided as positional arguments. If the objects are not already panel components they will each be converted to one using the
pn.panel conversion method.
w1 = pn.widgets.TextInput(name='Text:') w2 = pn.widgets.FloatSlider(name='Slider') column = pn.Column('# Column', w1, w2, styles=dict(background='WhiteSmoke')) column
In general it is preferred to modify layouts only through the provided methods and avoid modifying the
objects parameter directly. The one exception is when replacing the list of
objects entirely, otherwise it is recommended to use the methods on the
Column itself to ensure that the rendered views of the
Column are rerendered in response to the change. As a simple example we might add an additional widget to the
column using the append method:
w3 = pn.widgets.Select(options=['A', 'B', 'C']) column.append(w3)
On a live server or in a notebook the
column displayed above will dynamically expand in size to accommodate all three widgets and the title. To see the effect in a statically rendered page, we will display the column a second time:
In general a
Column does not have to be given an explicit
sizing_mode, allowing it to adapt to the size of its contents. However in certain cases it can be useful to declare a fixed-size layout, which its responsively sized contents will then fill, making it possible to achieve equal spacing between multiple objects:
pn.Column( pn.Spacer(styles=dict(background='red'), sizing_mode='stretch_both'), pn.Spacer(styles=dict(background='green'), sizing_mode='stretch_both'), pn.Spacer(styles=dict(background='blue'), sizing_mode='stretch_both'), height=300, width=200 )
When no fixed size is specified the column will expand to accommodate the sizing behavior of its contents:
from bokeh.plotting import figure p1 = figure(height=150, sizing_mode='stretch_width') p2 = figure(height=150, sizing_mode='stretch_width') p1.line([1, 2, 3], [1, 2, 3]) p2.circle([1, 2, 3], [1, 2, 3]) pn.Column(p1, p2)
Lastly it is also possible to enable scrollbars on the
Column container in case the content overflows the specified height and width:
pn.Column( pn.Spacer(styles=dict(background='red'), width=200, height=200), pn.Spacer(styles=dict(background='green'), width=200, height=200), pn.Spacer(styles=dict(background='blue'), width=200, height=200), scroll=True, height=420 )