panel icon indicating copy to clipboard operation
panel copied to clipboard

Adding resizable parameter to Viewable

Open philippjfr opened this issue 1 year ago • 2 comments

So I just had a user ask me whether it's possible to make a "Terminal component resizable" and the answer is yes, any component can easily be made resizable. I guess the question is, should this be exposed as a parameter so it is more easily discoverable?

Here is an example what you currently have to do:

pn.widgets.Terminal(
    "Welcome to the Panel Terminal!\nI'm based on xterm.js\n\n",
    options={"cursorBlink": True},
    min_height=300, sizing_mode='stretch_width',
    styles={"resize": "both", "overflow": "hidden"}
)

The alternative, I guess, is simply to find a good way to document this trick.

philippjfr avatar Apr 17 '24 16:04 philippjfr

I think documenting it is best. I'm not sure it's fully compatible with all widgets (i.e. UX isn't great):

import panel as pn

pn.extension()

pn.widgets.RadioButtonGroup(
    options=["Biology", "Chemistry", "Physics"],
    value="Biology",
    sizing_mode="stretch_both",
    styles={"resize": "both", "overflow": "auto", "flex-wrap": "wrap", "display": "flex"},
)

First off, the resize draggable is all the way at the bottom right corner:

image

When it's resized smaller, it gets ugly scrollbars; ideally it'd wrap.

image

ahuang11 avatar Apr 17 '24 19:04 ahuang11

Good point, it probably would work better with panes than widgets in general.

philippjfr avatar Apr 17 '24 19:04 philippjfr