ipywidgets

ipywidgets copied to clipboard

Hey there, I really like ipywidgets, great job! I already built some fun interactive diagrams for academic teaching purposes and have reached a point where I would like to present my results. So far I never cared about the layout, only built the content and thought "it can't be that hard". There's already a visual concept inside of my head which should look somewhat like this:

However, I'm struggling with the layout because the documentation is confusing to me. First of all, everything is explained in CSS without simple Python code examples. It is not clear to me where I have to use those snippets. Then there is this example with the buttons which is better than nothing but I would never have guessed it without this example. It does work with those buttons, but I don't even get it to work the same way with other classes like ipywidgets.Label and ipycanvas.MultiCanvas.

Here's my code:

from ipywidgets import GridBox, Layout, Label

Caption1 = Label(value=r"This should span over all three columns", grid_area='Caption1')
RRLt1    = Label(value=r"$\underline{Z}_{RL}$", grid_area='RRLt1')
RRLc     = RRL.canvas
RRLt2    = Label(value=r"Text about $\underline{Z}_{RL}$", grid_area='RRLt2')
RRCt1    = Label(value=r"$\underline{Z}_{RC}$", grid_area='RRCt1')
RRCc     = PRC.canvas
RRCt2    = Label(value=r"Text about $\underline{Z}_{RC}$", grid_area='RRCt2')
RRLCt1   = Label(value=r"$\underline{Z}_{RLC}$", grid_area='RRLCt1')
RRLCc    = RRLC.canvas
RRLCt2   = Label(value=r"Text about $\underline{Z}_{RLC}$", grid_area='RRLCt2')

gb=GridBox(children=[Caption1, RRCt1, RRLt1, RRLCt1, RRCc, RRLc, RRLCc, RRCt2, RRLt2, RRLCt2],
        layout=Layout(
            width='62%',
            grid_template_rows='auto auto auto auto',
            grid_template_columns='33% 33% 33%',
            grid_template_areas='''
            "Caption1 Caption1 Caption1"
            "RRLt1 RRCt1 RRLCt1"
            "RRLc RRCc RRLCc"
            "RRLt2 RRCt2 RRLCt2"
            ''')
       )

display(gb)

It looks good to me in theory. Very close to the original example. But when I execute it the caption does not span three columns, but only uses the first cell instead. The next cell (first row, second column) is then populated by RRCt1 and so on. Every element only uses one cell no matter what I do. grid_template_areas and grid_area have no effect at all. The only thing that I can change is the order of elements by changing the children list. With the Button class or sliders it is possible to populate more cells with one element, though.

So following this simple example I define a lot and achieve only little. Am I doing a beginner mistake or did I just forget something? I feel like I'm not even trying anything complicated but already failing so hard. I haven't even found another tutorial or example which makes use of GridBox so it proves quite hard for me to find the solution myself so my project is now on halt. I hope someone can explain the behaviour to me and I also hope that the guide about this topic gets upgraded. I can't be the only one struggling with this.

Cheers, Domme