question on layout

[retsyo]

Question

desired layout

• the main container, where I use a row, takes all space of window even I resize the window

• 2 columns lives in row

  • a horizontal gap is 10
  • 2*column1.width = column2.width
  • column1.width +gap10 + column2.width = row.width

• in column1, there are 2 labels A and B.

  • a vertical gap is 25
  • 2*labelA.height = labelB.height
  • labelA.height + gap25 + labelB.height = column1.height
  • labelA.width=labelB.width=column1.width (BTW, what if I need another layout, in which gap10 + labelA.width + gap10 = column1.width?)

• in column2, there are 3 labels C, D and E.

  • a vertical gap is 20
  • labelC.height = labelD.height = labelE.height
  • labelC.height + gap20 + labelD.height + gap20 + labelE.height = column2.height
  • labelC.width=labelD.width=labelE.width=column2.width

bad code I coined

from nicegui import ui

with ui.row().classes("gap-10 bg-grey no-wrap").style("width:100%;height:100%"):
    with ui.column().classes("w-1/3 gap-25 no-wrap").style("height:100%"):
        ui.label("A").classes("h-[calc(33.33%)] bg-red").style("width:100%")
        ui.label("B").classes("h-[calc(66.76%)] bg-red").style("width:100%")

    with ui.column().classes("w-2/3 gap-20 bg-green no-wrap").style("height:100%"):
        ui.label("C").classes("h-1/3 bg-red").style("width:100%")
        ui.label("D").classes("h-1/3 bg-red").style("width:100%")
        ui.label("E").classes("h-1/3 bg-red").style("width:100%")

ui.run(native=True, title="test")

Thanks

[falkoschindler]

Can you pinpoint what exactly does not work? What is your question?

[retsyo]

The 1st pic is what I expected. Please not that the 2 columns live in a row which should be zoomed accodring to the main window

The 2nd pic is what I got by code

from nicegui import ui

with ui.row().classes("gap-10 bg-grey no-wrap").style("width:100%;height:100%"):
    with ui.column().classes("w-1/3 gap-25 no-wrap").style("height:100%"):
        ui.label("A").classes("h-[calc(33.33%)] bg-red").style("width:100%")
        ui.label("B").classes("h-[calc(66.76%)] bg-red").style("width:100%")

    with ui.column().classes("w-2/3 gap-20 bg-green no-wrap").style("height:100%"):
        ui.label("C").classes("h-1/3 bg-red").style("width:100%")
        ui.label("D").classes("h-1/3 bg-red").style("width:100%")
        ui.label("E").classes("h-1/3 bg-red").style("width:100%")

ui.run(native=True, title="test")

[falkoschindler]

Ok, let's try this:

with ui.row().classes('w-full h-[calc(100vh-2rem)] no-wrap gap-10 items-stretch'):
    with ui.column().classes('w-1/3 bg-green-200 gap-24 items-stretch'):
        ui.label('A').classes('h-1/3 bg-red-200')
        ui.label('B').classes('h-2/3 bg-red-200')
    with ui.column().classes('w-2/3 bg-green-200 gap-24 items-stretch'):
        ui.label('C').classes('h-1/3 bg-red-200')
        ui.label('D').classes('h-1/3 bg-red-200')
        ui.label('E').classes('h-1/3 bg-red-200')

Notes:

• There is no trivial way to fill 100% of the vertical space, because the HTML body scrolls by default. But you can calculate the height from 100% of the view height minus twice the vertical padding of 1rem.
• "w-full" would actually take up 100% of the total width, which is more than the available space considering the horizontal padding. But "no-wrap" prevents the row from wrapping and squeezes both columns into one row.
• "items-stretch" lets all children take 100% of the cross-axis dimension. Alternatively you can use w-full or h-full on the child elements.
• There is no "gap-25" class in TailwindCSS. You can either use "gap-24" or a custom value like so: "gap-[123px]".

[jdegenstein]

This is a great example, would love to see something like this in the docs if it isn't there already. It is super useful with e.g. codemirror for example which can be kind of a pain to resize in native mode.