Quasar CSS flexbox layout classes don't work

[me21]

Description

Consider the following code:

with ui.row().classes('w-full gap-0'):
    ui.label('Text 1').classes('col-6')
    ui.label('Text 2').classes('col-6')

The labels don't take 50% of the parent element width. But if we write the enclosing row as with ui.row().classes('w-full gap-0 row'):, adding row class, the layout looks as expected.

According to https://quasar.dev/layout/grid/introduction-to-flexbox#setting-direction, it's mandatory to have one of a few classes on the parent for the children classes to work.

A workaround is to use TailwindCSS classes (w-1/2 instead of col-6) on children.

[falkoschindler]

Thanks, @me21!

I'm not sure if this is a bug in ui.row, because it doesn't promise Quasar's flexbox classes to work. We deliberately chose not to add any classes to UI elements, because then their style is harder to change from within user code.

But I understand the confusion. If ui.button represents a Quasar button and ui.icon represents a Quasar icon, why doesn't ui.row represent a Quasar row where we can use classes like col-6.

Do you have an idea what to do about it? Should we simply add the "row" class on every ui.row?

[me21]

I see that ui.row element has nicegui-row class, so you're adding some classes to UI elements after all 😃
I think I remember that in version 0.9 NiceGUI rows had row class, but in version 1 it changed to nicegui-row.
Let's recollect what was the cause behind that change.

[falkoschindler]

You're right, I was trying to say we're not adding Quasar or Tailwind classes, but only our own "nicegui-*" classes that are referenced in nicegui.css to add some default styling.

I think our reasoning was as follows:

• If we add a class like "p-4" to give every ui.row some default padding, the user would wonder why "p-2" doesn't work. But "p-2" doesn't replace "p-4". Tailwind decides which class wins.
• If we add a class like "nicegui-row" and some CSS .nicegui-row { padding: 1rem }, a Tailwind class "p-2" does work due to higher specificity.

Here are two related posts:
https://github.com/zauberzeug/nicegui/releases/tag/v1.2.0
#596 (comment)

[me21]

Well, .nicegui-row style is:

{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--nicegui-default-gap);
  padding: var(--nicegui-default-padding);
}

And .row style is:

{
  display: flex;
  flex-wrap: wrap;
}

Seems short enough, doesn't add extra styles that would be hard to override from user code. So it's fairly safe to add "row" class to ui.row() elements. What's your opinion on this?
NiceGUI currently adds "wrap" style from Quasar if wrap argument of ui.row() is True (it is by default).
Should be possible to add "row" class by default, and if wrap argument is False, add no-wrap class to it.

But the core rule in quasar.prod.css that makes "col-6" and alike work, is:

.row > .col-6, .row > .col-xs-6 {
  height: auto;
  width: 50%;
}

If you'd rather not add Quasar classes to elements, what do you think about repeating this rule for "nicegui-row" class, like:

.nicegui-row > .col-6, .nicegui-row > .col-xs-6 {
  height: auto;
  width: 50%;
}

Why Tailwind classes have higher specificity than NiceGUI ones?

[falkoschindler]

Yes, .row seems to be rather safe to add. 👍🏻

Repeating .row>.col-* rules for .nicegui-row>.col-* doesn't sound too compelling. This duplicates code and might lead to regressions in case they change something in their layout system.

Why Tailwind classes have higher specificity than NiceGUI ones?

I must correct myself once again: Both seem to have the same specificity, but Tailwind CSS is defined after loading nicegui.css and therefore takes precedence over nicegui.css.

[me21]

I agree with your evaluation. Adding back "row" and "column" classes to respective elements and changing wrap parameter handling seems the optimal solution.

[me21]

Another option would be stating this in the documentation explicitly and not changing anything.

[falkoschindler]

I just created PR #3008 to add "row" to ui.row. Would you like to have a look, @me21? 🙂