Trouble understanding sizing_mode and getting panels to resize

I am using the react template and seem to have gotten my plots working well. I am trying to add more components to the sidebar now and am mostly using cards. The cards are updated dynamically, but when I append to them elements seem to appearing outside of the cards as in the latency labels and the cards are not resizing properly whenever new elements are added. I dont understand the different sizing modes.

The example I copied to get the plots to work has pn.config.sizing_mode = ‘scale_both’ in it. For the cards in the sidebar I’ve tried sizing_modue=‘stretch_both’, but it doesnt seem to work.

Also, I tried a column instead of a card, but didnt see any difference.

In the sidebar you can check stretch_width.

It is something tricky when you append several elements to the sidebar. I usually add one Column containing all the widgets with sizing mode stretch_width

I tried using a column and appending to that. Whenever I would append to the bottom Card, the top one would expand as well.

Using a GridSpec instead of a Column worked, if I appended to the bottom Card the top would stay fixed, but I couldnt figure out the width because it was making everything too wide and there would be scroll bars.

In the end I decided to use tabs, that seemed to work.

2 Likes