ipywidgets layouts, vertical align boxes?

638 Views Asked by At

I'm trying to line up a left hand label with a right hand list. It seems like under the hood the HBox and VBox are using flexbox but i can't get them to nest and align correctly. The doc examples only show simple horizontal alignment, which isn't going to well for me either. Anyone done this before?

The image below is what I'm shooting for:

This is what I'm getting:

enter image description here

Here is the code:

from ipywidgets import *

t = {
    "Product List": [
        "tblProducts",
        "AMZ Listing Fees",
        "tblReferalFee",
        "tblSellingFees",
        "tblRentalBookFee",
        "tblHighVolumeFee"
        "tblRefundAdministrationFee"
    ], "AMZ FBA Fees": [
        "tblFullfillment_Fees",
        "tblMonthlyStorageFees",
        "tblLongTermStorageFees",
        "tblRemoval_Fees",
        "tblReturnsProcessingFee",
        "tblInventorySizes",
        "tblInventoryPlacementFees",
        "tblCasePackedProduct",
        "_tblDim_Const"
    ], "Enums": [
        "_Product_Enum_UnitType",
        "_tblMediaCatagoriesEnum"
    ]
}

dispBoxes = []
for k,v in t.items():
    vlayout = Layout(
        flex="5 5 auto",
        width="auto",
        halign="center"
    )
    hlayout = Layout(
        flex="1 1 auto",
        width="auto"
        #halign="center"
    )
    tblLbs = [Label(i) for i in v]
    dispBoxes.append(
        HBox([
            VBox([Label(k)], Layout=vlayout), 
            VBox(tblLbs, Layout=hlayout)
    ]))

display(
    VBox(dispBoxes)
)
0

There are 0 best solutions below