Nesting cards merges the elements about nicegui HOT 6 OPEN

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.

from nicegui.

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.

from nicegui.

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." ?

from nicegui.

@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?

from nicegui.

@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>

from nicegui.

@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')

  

from nicegui.