how to set spaceBetween , spaceEvenly , spaceAround on row ?

[bobwatcherx]

can you add documentation to set spaceBetween , spaceEvenly , spaceAround on row and column. and give an example

[rodja]

We are working on a simplified, well documented styling in #117. For the time being you can have a look at https://quasar.dev/layout/grid/introduction-to-flexbox for good documentation.

[bobwatcherx]

why is this not working i want the button to shift to the right

with ui.column():
    ui.label("header")
    with ui.row():
        ui.label("test")
        ui.button("tatatat", on_click=addnow).classes("justify-end")

[falkoschindler]

justify-end is "for controlling how flex and grid items are positioned along a container's main axis" (see https://tailwindcss.com/docs/justify-content). So it should be applied to the row, not to the button. But I think justify-between is ore what you want.

Secondly, you don't see the effect if the container is not large enough. Adding w-full to the row and column lets them grow to the full screen width. For debugging it helps to set something like bg-red-100 or bg-green-100:

with ui.column().classes('w-full bg-red-200'):
    ui.label("header")
    with ui.row().classes('w-full justify-between bg-green-200'):
        ui.label("test")
        ui.button("tatatat")