Nesting cards merges the elements

[ghbm-itk]

Description

When placing cards inside other cards they merge insted of nesting, which seems very unintentional.

Somehow this also affects toggles. I guess they're based around cards? Or maybe it's the drop shadow that's weird.

If I use intermediate containers like a row the cards don't merge.

from nicegui import ui

ui.toggle(["One", "Two"])

with ui.card():
    ui.toggle(["One", "Two"])

with ui.card():
    with ui.row():
        ui.toggle(["One", "Two"])

with ui.card():
    ui.label("Hello")

with ui.card():
    with ui.card():
        ui.label("Hello")

with ui.card():
    with ui.row():
        with ui.card():
            ui.label("Hello")

ui.run()

It doesn't seems to be a problem in Quasar, but the q-card-sections need to be there for the cards to nest properly:

https://codepen.io/Hermasetas/pen/oNVXKGB

[falkoschindler]

Hi @ghbm-itk, this is an unfortunate consequence of how NiceGUI adds default padding to ui.card, which Quasar doesn't. It has been discussed in #726 and #1295 (comment) and is documented here.

[ghbm-itk]

Since the problem is so easily fixed by simply wrapping the element in another element, it seems like something should be possible to fix. I don't understand the backend of NiceGui well enough yet, but I will look into it at some point.

Could a simple hotfix be something like: "If parent is a card wrap this element." ?

[falkoschindler]

@ghbm-itk I don't think it's a good idea to automatically change the element hierarchy, because it would break certain assumptions (see #2040 for a discussion about a similar case).

I tried once again to undo Quasar's CSS magic - without success. But I found a way to wrap the card content in a separate div, so that it isn't affected by the Quasar's CSS; see PR #2301. What do you think?

[ghbm-itk]

@falkoschindler Isn't that just q-card-section reinvented? When looking at the examples on quasar.dev it seems that all content in cards is wrapped in card sections:

<q-card>
  <q-card-section>
    <div class="text-h6">Our Changing Planet</div>
    <div class="text-subtitle2">by John Doe</div>
  </q-card-section>
</q-card>

[falkoschindler]

@ghbm-itk Sorry for the late reply. I think it's a bit different:

• QCards usually don't have any padding. But you can add padding with QCardSections:

  with ui.element('q-card'):
      ui.label('No padding.').classes('border')
  
  with ui.element('q-card'):
      with ui.element('q-card-section'):
          ui.label('Padding.').classes('border')

  

• ui.card comes with padding by default. But in order for Quasar not removing borders of nested elements, adding another container layer helps:

  with ui.card():
      ui.label('Padding.').classes('border')
  
  with ui.card():
      with ui.element():
          ui.label('Padding.').classes('border')

  

[falkoschindler]

I just closed PR #2301, because we're no longer convinced that it is a good idea to add additional layers to ui.card to fix a layout inconsistency between NiceGUI and Quasar. Instead, I propose the following:

1. Change ui.card to mimic QCard more closely. It won't add padding and gaps anymore, and requires to use ui.card_section where padding is required. This is like the old ui.card().tight(). For convenience, we can add QCard's style props as parameters:

   ui.card(*, square: bool = False, flat: bool = False, bordered: bool = False)

2. Introduce a new ui.box element which behaves like the old ui.card. But instead of using QCard, it is simply a ui.column with optional shadow, border and/or rounded corners. Like the old ui.column and ui.card it adds padding and gaps. Replicating QCard's style props the signature might look like this:

   ui.box(*, square: bool = False, flat: bool = False, bordered: bool = False)

   Or we use more independent and maybe more intuitive parameter names like this:

   ui.box(*, rounded: bool = True, shadow: bool = True, border: bool = False)

Even though this requires all users to change ui.card to ui.box when migrating to NiceGUI 2.0.0, this is a much cleaner solution with less caveats compared to the old ui.card, which almost behaves like QCard, but leads to strange results when nesting bordered elements.