How to automatically grow elements when others are hidden?

[schroederjoa]

I recently hat an issue with a lightweight-charts integration, related to resizing of elements and overflow. Falko was so kind and helped me with it, see #5400
In this context, the question came up how I can grow elements, and make them use all available space, once other elements (like a menubar) are hidden. I ended up using the following solution, which may help others with similar questions:

from nicegui import ui

switch = ui.switch('switch me', value=True)

ui.query('.nicegui-content').classes('absolute-full')

ui.add_css('''
	.my-flex-container-horz {
		display: flex;
		flex-flow: row nowrap;
	}
	.my-flex-container-vert {
		display: flex;
		flex-flow: column nowrap;
	}
	.my-flex-element {
		flex-grow: 1 ;
	}
''')	


with ui.element().classes('w-full h-full gap-1').classes('my-flex-container-horz'):
	
	ui.label().bind_visibility_from(switch, 'value').style('background-color: blue').classes('h-full').classes('my-flex-element')
	ui.label().style('background-color: tomato').classes('h-full').classes('my-flex-element')
	ui.label().style('background-color: green').classes('h-full').classes('my-flex-element')



with ui.element().classes('w-full h-full gap-1').classes('my-flex-container-vert'):
	
	ui.label().bind_visibility_from(switch, 'value').style('background-color: blue').classes('my-flex-element')
	ui.label().style('background-color: tomato').classes('w-full').classes('my-flex-element')
	ui.label().style('background-color: green').classes('w-full').classes('my-flex-element')

ui.run(native=True)

[falkoschindler]

Nice, @schroederjoa!

We can simplify it a bit:

switch = ui.switch('toggle blue boxes', value=True)

with ui.row().classes('size-50 items-stretch'):
    ui.label().classes('grow bg-blue').bind_visibility_from(switch, 'value')
    ui.label().classes('grow bg-orange')
    ui.label().classes('grow bg-green')

with ui.column().classes('size-50 items-stretch'):
    ui.label().classes('grow bg-blue').bind_visibility_from(switch, 'value')
    ui.label().classes('grow bg-orange')
    ui.label().classes('grow bg-green')

The class "items-stretch" lets all child element fill space across the principal axis (height for ui.row, width for ui.column).
The class "grow" lets child elements fill space along the principal axis (width for ui.row, height for ui.columns).

The latter could be replaced with the class "[&>]:grow" on a container, which applies to all its children ("&>").

[schroederjoa]

Wow that is even better. I need to get more familiar with tailwind!