Appending to row doesn't work as it used to after the 1.2.0 update

[DavidLeBonk]

This was initially a YT comment but it got deleted, I'm guessing because of the Imgur links in the command so I made an issue myself here.

Hey I noticed that pre 1.2.0 I was able to append items to a row and have them drop down to the next row automatically if the page could not fit them, after 1.2.0 this is no longer the case, it now just carries on and adds a scroll wheel to the page, do you have any ideas on what changes within the 1.2.0 update could have caused this?

Examples:
1.1.11: https://i.imgur.com/AJvVpeT.gif
1.2.0: https://i.imgur.com/Wapxbao.gif

[falkoschindler]

Thanks for spotting this, @DavidLeBonk!

Indeed, ui.row used to wrap by default, which it doesn't in 1.2.0:

with ui.row():
    for i in range(100):
        ui.label(f'Label {i}')

In 1.2.0 we replaces the default classes for certain elements with CSS style definitions in nicegui.css in order to avoid issues with contradicting classes after updating the Tailwind dependency. When replacing the classes "row" and "column" with the CSS equivalent from the Tailwind website, I forgot that "row" and "column" are also Quasar classes that wrap by default.

So we can either leave it as it is and you need to enable wrapping with .classes('wrap'), or we switch back to default wrapping as in 1.1.x by adding flex-wrap: wrap to nicegui.css.

[DavidLeBonk]

Thank you very much, adding .classes('wrap') to my definition of ui.row() resolved the issue. I see you marked this as a bug, can I assume the behavior of wrapping will be enabled by default in future versions?

[falkoschindler]

Yes, it is an unintended change that can be fixed easily. And since we're planning a bugfix release today, we decided to re-introduce the auto-wrap for rows and columns.

[DavidLeBonk]

Sweet, I am happy I was of use!

[falkoschindler]

Ok, 537625b should re-introduce the old behavior. Will be released shortly.

[falkoschindler]

I just noticed that .classes('no-wrap') does not work anymore. The CSS definition flex-wrap: wrap in nicegui.css takes precedence, even though the class no-wrap appears later in the class list.

[falkoschindler]

It looks like Tailwind classes overrule nicegui.css (which is desired), but nicegui.css overrules Quasar classes (which is undesired). And no-wrap is a Quasar class. Replacing no-wrap with Tailwind's flex-nowrap works, but is similarly confusing like having no default wrap in the first place.

[falkoschindler]

Loading nicegui.css before Tailwind and Quasar should solve the no-wrap issue: d1984b0
Now both Tailwind and Quasar classes take precedence over nicegui.css.