VBox widget not scrollable #790
Description
I am trying to build a custom widget class that I want to use for popups in a couple of ipyleaflet Markers. The custom widget consists of a main HBox, which itself contains two VBoxes.. something like this:
So far so good.. the smaller VBox on the left is meant to be scrollable. This screenshot was taken from a Jupyter notebook with the ipyleaflet Map as a solara component (see code below).
However, when I test the same code using solara, the left VBox is not scrollable and its elements are incomplete (e.g., you can't see the "C" item):
Here's the code:
import solara
import markdown
import ipyleaflet
import ipywidgets as widgets
text = """## Test markdown
### Details
- **A**: a
- **B**: b
- **C**: c
"""
class Map(ipyleaflet.Map):
def __init__(self, **kwargs):
super().__init__(**kwargs)
marker = ipyleaflet.Marker(
location = (0,0),
draggable = False,
title = "My marker",
popup_max_width=1000,
popup_max_height=1000
)
self.add(marker)
main_box = widgets.HBox(
layout=widgets.Layout(
width='1000px',
height='480px',
justify_content='space-between',
)
)
panel_box = widgets.VBox(
layout = widgets.Layout(
width='25%',
height='100%',
border='solid 2px'
)
)
image_box = widgets.VBox(
layout = widgets.Layout(
width='65%',
height='100%',
border='solid 2px'
)
)
value = markdown.markdown(text)
description_box = widgets.HTML(
layout=widgets.Layout(
border='solid 1px',
flex_shrink=1
),
value=value,
)
panel_box.children = [
description_box,
description_box,
description_box,
description_box,
]
main_box.children=[
panel_box,
image_box
]
marker.popup = main_box
@solara.component
def Page():
with solara.Column() as main:
map = Map.element(
layout=widgets.Layout(height='800px')
)
return main
display(Page())