How to position two images next to each other?

[wielandb]

The code

from nicegui import ui

with ui.row():
    ui.image("https://picsum.photos/id/377/640/360")
    ui.button("Button 1")
    ui.button("Button 2")
    ui.button("Button 3")
    ui.image("https://picsum.photos/id/377/640/360")

ui.run()

does not, as would one expect, position all theese elements next to each other, but always forces a line break for images:

Is this behaviour intended? Is it a technical limitation? If not, how to position two images next to each other?

[falkoschindler]

You can add the class "no-wrap" to the row. Because images get their size automatically from the surrounding container, we either need to give the row or the images themselves a width or height:

with ui.row().classes('no-wrap'):
    ui.image("https://picsum.photos/id/377/640/360").classes('w-60')
    ui.button("Button 1")
    ui.button("Button 2")
    ui.button("Button 3")
    ui.image("https://picsum.photos/id/377/640/360").classes('w-60')

[wielandb]

As I am not super proficient with styling and don't know if this is expected or normal when working in webdesign, I am unsure if maybe it would be a good idea to reference this behaviour in the documentation?

[rodja]

Thanks! We are internally working on a simplified styling solution for non-web-devs in #117.