Column#

Open this notebook in Jupyterlite | Download this notebook from GitHub (right-click to download).

import panel as pn
pn.extension()

The Column layout allows arranging multiple panel objects in a vertical container. It has a list-like API with methods to append, extend, clear, insert, pop, remove and __setitem__, which make it possible to interactively update and modify the layout.




Parameters:#


For details on other options for customizing the component see the layout and styling how-to guides.


    

  • 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.
    • 





A 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:


column








In general a Column does not have to be given an explicit width, height or 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
)










Open this notebook in Jupyterlite | Download this notebook from GitHub (right-click to download).