3 buttons in a row with the same size maximum width

[Ovoron]

Question

Hello,
I want to create 3 buttons in a row.
Every button with the same size and across the whole width.

with ui.row().style('width: 100%; display: flex;'):
        ui.button('Button 1').style('flex: 1; margin: 5px;')
        ui.button('Button 2').style('flex: 1; margin: 5px;')
        ui.button('Button 3').style('flex: 1; margin: 5px;')
#or
with ui.row().classes("justify-center w-full border"):
        ui.button('Button 1')
        ui.space()
        ui.button('Button 2')
        ui.space()
        ui.button('Button 3')

The problem is that not the entire width is used.
What do I need to add?

I have attached a picture of this problem.

Greetings Ovoron

[python-and-fiction]

it depends on parent element's width. May you provide your code which shows pic?

[Ovoron]

Hi,
That's a really quick answer.
The code

main.py:

import ...
@ui.page('/Tetris')
def index_page() -> None:
    with theme.frame('Tetris', 'Author: '):    
        WebApp_Tetris.content()

ui.button.default_classes('touch-manipulation')
ui.run(viewport='width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no', title='Meine App von AS', reload=False, port=8082, binding_refresh_interval=0.2, show=False)

theme.py:

import ...
@contextmanager
def frame(navtitle: str, foottext: str):
    """Custom page frame to share the same styling and behavior across all pages"""
    ui.colors(primary='#XXXXXX', secondary='#53B689', accent='#111B1E', positive='#53B689')
    with ui.header().classes('justify-between text-white'):
        ui.label(navtitle) 
        with ui.row():
            menu()

    ui.query('body').classes('bg-gradient-to-t from-cyan-500 to-blue-500')
    
    with ui.column().classes('justify-content: flex-start;'):
        yield

menu.py:

def menu() -> None:
    with ui.expansion(icon='menu'):   # icons 'settings' oder 'menu' 
        ui.button('Home/RTC', color='gray', on_click=lambda: ui.open('/'))
        ui.button('Tetris', color='gray', on_click=lambda: ui.open('/Tetris'))
        ui.button('RTC & Settings', color='gray', on_click=lambda: ui.open('/RTC_Settings'))
        ui.button('Evil_Paluten', color='gray', on_click=lambda: ui.open('/Evil_Paluten'))

WebApp_Tetris.py:

import ...
def content() -> None:
    message('TETRIS Control UI').classes('font-bold red')

    with ui.row().style('width: 100%; display: flex;'):
        ui.button('Button 1').style('flex: 1; margin: 5px;')
        ui.button('Button 2').style('flex: 1; margin: 5px;')
        ui.button('Button 3').style('flex: 1; margin: 5px;')

    with ui.row().classes("justify-center w-full border"):
        ui.button('Button 1')
        ui.space()
        ui.button('Button 2')
        ui.space()
        ui.button('Button 3')

Many thanks for the support

[python-and-fiction]

Parent element is column in 'theme.py' which did not apply with w-full.
Modify it like this:

theme.py:

import ...
@contextmanager
def frame(navtitle: str, foottext: str):
    """Custom page frame to share the same styling and behavior across all pages"""
    ui.colors(primary='#XXXXXX', secondary='#53B689', accent='#111B1E', positive='#53B689')
    with ui.header().classes('justify-between text-white'):
        ui.label(navtitle) 
        with ui.row():
            menu()

    ui.query('body').classes('bg-gradient-to-t from-cyan-500 to-blue-500')
    
    with ui.column().classes('justify-content: flex-start; w-full'):
        yield

And It works as expected:

[Ovoron]

Thank you very much
You have helped me a lot.