Working example of pn.FlexBox with two hv.Curves, sized using the flexbox mechanism

[hrbigelow]

Hi,

I wondered if it’s possible to use pn.FlexBox together with hv.Curve (or other holoviews objects) in such a way that the height and width of the individual hv.Curve objects are dictated by the FlexBox. For example, I would like to specify that one curve takes up 2 parts, and the other 1 part of the available width.

I’ve tried various combinations such as the example below, but it seems that the FlexBox cannot dictate the width of the hv.Curves ultimately.

I did see in Control Size — Panel v1.2.1, they say:

So, I’m wondering if that is true in this case.

import numpy as np
import holoviews as hv
import panel as pn
from panel.pane.holoviews import HoloViews

d1 = np.random.randn(100,2)
d2 = np.random.randn(100,2)

c1 = hv.Curve(d1)
c2 = hv.Curve(d2)

h1 = HoloViews(c1, min_width=200, max_width=600, width_policy='fit', sizing_mode='stretch_width')
h2 = HoloViews(c2, min_width=200, max_width=600, width_policy='fit', sizing_mode='stretch_width')

kwargs=dict(
    align_content='space-evenly',
    flex_direction='row',
    sizing_mode='stretch_width',
    width_policy='fit',
    justify_content='space-around',
    max_width=1000)

fb = pn.FlexBox(h1, h2, **kwargs)

fb

[ahuang11]

Have you tried using styles={"width": "fit-content"}?

A workaround for `width_policy="fit"` + `sizing_mode="stretch_width"`

Since I don’t think width_policy is functional (I could be wrong), if you have pn.extension(sizing_mode="stretch_width") but… don’t want a component to stretch don’t want to set a fixed width + height don’t want to encounter these warnings when setting sizing_mode="fixed": (FIXED_SIZING_MODE): 'fixed' sizing mode requires width and height to be set: HTML(id='p1194', ...) Use stylesheets or styles: styles=dict(width="fit-content") Before: [image] After: [image]

[hrbigelow]

Great! Yes, that worked, thanks for the suggestion Andrew. (I’ve confirmed it works both in Jupyter notebook and browser)

Here is the complete working example. It was important to inject the styles argument both for the HoloViews elements and the FlexBox element. The 4:1 width ratio seems approximate, not sure what’s going on, but perhaps it is a default minimum width that is preventing the true ratio.

hv.extension('bokeh')
# pn.extension(sizing_mode='stretch_width')

d1 = np.random.randn(100,2)
d2 = np.random.randn(100,2)

c1 = hv.Curve(d1)
c2 = hv.Curve(d2)

h1 = HoloViews(c1, styles={'flex-grow': '4'})
h2 = HoloViews(c2, styles={'flex-grow': '1'})

kwargs=dict(
    flex_wrap='nowrap',
    styles={'width': 'fit-content'},
    min_width=1000)

fb = pn.FlexBox(h1, h2, **kwargs)
fb