React template & FlexBox issues

Panel
1

I have a complex app layout with components laid out inside of pn.Tabs. I’ve noticed that when I have a FlexBox and a Holoviews pane within a tab, I can’t seem to reactively resize the components within react.main (e.g., the resize icon is non-functional).

Additionally, there seems to be extra space below the FlexBox that I would like to collapse.

For example:

import panel as pn
import holoviews as hv
import numpy as np

pn.extension(sizing_mode='stretch_width')

react = pn.template.ReactTemplate()

plot = pn.pane.HoloViews(hv.Curve([(0.1*i, np.sin(0.1*i)) for i in range(100)]).opts(responsive=True), sizing_mode='stretch_both')

slider = pn.widgets.FloatSlider(start=0, end=1, value=0.5, width = 150, height = 30)
selector1 = pn.widgets.Select(options=['a', 'b', 'c'], width = 150, height = 30)
selector2 = pn.widgets.Select(options=[1, 2, 3], width = 150, height = 30)

flexbox = pn.FlexBox(slider, selector1, selector2, justify_content='center')

react.main[:3, :3] = pn.Tabs(pn.Column(plot, flexbox,))

react.servable()

image
image642×502 56 KB

I tried running this same code with Panel 0.12.0, and the resizing issue was fixed, but the extra space below the FlexBox still remained.

Any help troubleshooting this issue would be appreciated!

Thanks!!

2

The column and the tabs follow the stretch width mode. I think you need to put stretch_both in the global sizing mode or put stretch both in the column and tabs that wrap your plot.

3

Hi @nghenzi! Thanks for the reply. Adding sizing_mode=‘stretch_both’ to either the Column, Tabs, or both doesn’t seem to fix the extra space issue. I also tried changing the sizing_mode within pn.extension with no luck. And the inability to resize the components remains.

5

I noticed that as soon as you resize the window it removes the space. I would say its a bug and you could file it on Github.

6

As a workaround you can manually add a resize event like below.

import panel as pn
import holoviews as hv
import numpy as np

pn.extension(sizing_mode='stretch_width')

react = pn.template.ReactTemplate()

plot = pn.pane.HoloViews(hv.Curve([(0.1*i, np.sin(0.1*i)) for i in range(100)]).opts(responsive=True), sizing_mode='stretch_both')

slider = pn.widgets.FloatSlider(start=0, end=1, value=0.5, width = 150, height = 30)
selector1 = pn.widgets.Select(options=['a', 'b', 'c'], width = 150, height = 30)
selector2 = pn.widgets.Select(options=[1, 2, 3], width = 150, height = 30)

resize_event = pn.pane.HTML("<script>setTimeout(function(){window.dispatchEvent(new Event('resize'))}, 25);</script>",
    sizing_mode="fixed", height=0, width=0, margin=0)

flexbox = pn.FlexBox(slider, selector1, selector2, justify_content='center')

react.main[:3, :3] = pn.Tabs(pn.Column(plot, flexbox,resize_event))

react.servable()
3 Likes
7

Thanks @Marc, this is exactly what I needed as a workaround for the extra space issue. I’ll file a bug report soon.

On my end, I still have the issue where the resizing handles for the window are non-functional… do you notice this on your end? I wonder if it has something to do with this warning message that I see in the console?

image
image1311×604 36.3 KB