How to wrap long list of CheckButtonGroup

Hello,

I have a lot of possible options in a data set which I represent with pn.widgets.CheckButtonGroup. The problem is that the button list cannot be line-wrapped, i.e. it just extends to the left.

A simplified example is this, where there are 20 buttons in a row:

selectors = ['Button'+str(num) for num in range(1,21)]

selectors_widget = pn.widgets.CheckButtonGroup(
    options=selectors, 
    value=['Button1'])

my_column = pn.Column(
    selectors_widget, 
    width=50)

my_column

It would be nice to have them the long row of buttons split at e.g. the width of a Column, but also this doesn’t work.

As you can see, I also tried around with “width”, but this didn’t help.

I have a not-so nice workaround for this, where I just split up the array in same-sized sub-arrays which then create individual button-lists, but this is a bit cumbersome and not very flexible.

Is there any way to make a CheckButtonGroup into several lines automatically?

Thanks and cheers,
Georg

Hi ! I do not know if it is possible to have a dynamic layout in the internal layout of the check button group. One possibility I see is to make a list of buttons and use a dynamic layout like FlexBox. The disadvantage of this is you are going to attach one callback for each one of the 20 buttons.

wrapped

import panel as pn
buttons = [pn.widgets.Button(name='Button'+str(num)) for num in range(1,21)]
pn.FlexBox(*buttons).servable()

1 Like

Right now you would have to include some custom CSS:

pn.extension(raw_css=['.bk-root .bk-btn-group { flex-wrap: wrap }'])

and then set a width on the CheckButtonGroup.

4 Likes

Thank you for this - that’s exactly the magic I was looking for :). Works perfectly and I hope others can also benefit from this answer.

4 Likes

great ! clearly, I need to improve my css skills…

2 Likes