1

I've been working on a geemap project in Jupyter Notebooks because that's what was recommended, but now I'm starting to look at publishing. I'm trying out Voila because it has a bunch of recommendations and looks simple, but I ran into a problem.

The Jupyter Notebook version looks like this, where the panels fit their content: Correctly rendered map

The Voila preview looks like this, where the panels fill available width: Incorrectly rendered map

The code I have for generating the panels doesn't include any parameters, so no styles and no children (I add them later, as seen below):

panel = ipywidgets.HBox(); #Initialize panel panel.children = (Btn1, Btn2) #Add children to panel Map.add_widget(panel, position="topright") #Add panel to map

All of my panels are created in a similar way. What I would like is the Voila version to match the Jupyter Notebook layout. To be entirely honest, I'm not sure what's causing this.

Improve this question

1 Answer 1

Reset to default
0

Yippee!!! I fixed it! :). All it took was banging my head against somebody else's CSS until something looked different!

Unironically, It took me so long, I thought I was on the wrong tab when this worked.

The code I added:

from IPython.display import display, HTML display(HTML(""" <style> .lm-Widget.lm-Panel.jp-OutputArea-child{ display: inline-block; } </style> """))

The default display: table; was taking all the width it could for whatever reason. Looks pretty now: enter image description here

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.