Element borders are removed when placed inside a card

[miqsoft]

Description

Hey,

I just figured out that the bordered property does not work when table is inside a card.
I sadly could not figure out the reason for that behaviour.

Here is a small example showing the issue:

from nicegui import ui

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name', 'required': True, 'align': 'left'},
    {'name': 'age', 'label': 'Age', 'field': 'age', 'sortable': True},
]
rows = [
    {'name': 'Alice', 'age': 18},
    {'name': 'Bob', 'age': 21},
    {'name': 'Carol'},
]

# here the border is present
ui.table(columns,rows).props('flat bordered separator=cell')

# here the border is missing
with ui.card().classes('w-full'):
    ui.table(columns,rows).props('flat bordered separator=cell')

[falkoschindler]

Thanks for reporting this bug, @miqsoft! It seems like ui.card messes with borders of child elements:

with ui.card():
    ui.label('A')
with ui.card():
    with ui.card():  # <-- this card has no visible border
        ui.label('B')

This bug sounds familiar. A few months ago we had very similar problems with ui.card. Maybe I'll find the solution in the commit history.

[falkoschindler]

Apparently this is "normal" behavior in Quasar. Using the UMD example from https://quasar.dev/start/umd and nesting two cards, the inner card has not shadow:

<div id="q-app">
    <q-card style="padding: 1em; background-color: #ffdddd">
    <q-card style="padding: 1em; background-color: #ddddff">Hello World!</q-card>
    </q-card>
</div>

Here are the rules from quasar.css that disable shadow and border in some cases:

.q-card>div:first-child,
.q-card>img:first-child {
    border-top: 0;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit
}
.q-card>div:last-child,
.q-card>img:last-child {
    border-bottom: 0;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit
}
.q-card>div:not(:first-child),
.q-card>img:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}
.q-card>div:not(:last-child),
.q-card>img:not(:last-child) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}
.q-card>div {
    border-left: 0;
    border-right: 0;
    box-shadow: none
}

[falkoschindler]

I think I understand the reason for this weird behavior:

• QCards don't have padding by default. So a border of child elements would overlap with the card's border, therefore it is removed.
• NiceGUI adds 16px padding by default. Now the missing child borders are clearly visible.

As a workaround you have two options:

1. Remove the padding:

   with ui.card().classes('p-0'):
       ui.table(columns, rows).props('flat bordered separator=cell')

2. Wrap the table in another container:

   with ui.card():
       with ui.row():
           ui.table(columns, rows).props('flat bordered separator=cell')

I'm not sure if and how we should handle this glitch in NiceGUI. Maybe we just add some remarks and a demo to the documentation? I'd rather not change the default padding, since it would break many existing layouts and is usually very handy.