[Bug]: AntDesign paging style issue when using datagrid

[GeertvanHorrik]

[Bug]: AntDesign paging style issue when using datagrid

[GeertvanHorrik]

Created Blazorise_Playground repro so I can easily add more repros in the future.

Please see the DataGrid page. Once I update to the latest, the buttons are invisible. If you add the clear: both, it starts behaving as it used to do.

[GeertvanHorrik]

I think there are more issues with the datagrid. Buttons floating above the datagrid are overlapped by the ant-table-content style. Whenever I disable position: relative, the buttons show up again.

Below shows the issue where the DataGrid adds the white header at the top (not sure why):

Whenever I remove the position: relative from ant-table-content, the buttons show up, but before 1.5 it was not adding this white header.

The datagrid is completely separated from the buttons, yet still it overlaps them somehow. Wrapping the DataGrid inside a div with clear: both "solves" the issue:

<div>
    <Button>
        Edit
    </Button>

    ....
</div>


<div style="clear: both;">
    <DataGrid>
        ...
    </DataGrid>
</div>

[stsrki]

Can you clarify what buttons? Are we still talking about pagination button? If you have some custom code it would be great if you could provide an example.

[GeertvanHorrik]

No, just custom buttons I put above the datagrid. I will try to create a repro, but it's a lot of work every time I find something so must find resources to do so.

Here is the pseudo code I use:

<div>
    <Button>
        Edit
    </Button>

    ....
</div>

<div style="clear: both;">
    <DataGrid>
        ...
    </DataGrid>
</div>

Without the clear: both, the datagrid expands to the top, hiding the buttons.

[stsrki]

Ant Design may also have some new default styles in v4.24.x.