Magento 2.3.0 Admin grid using UI component sticky CSS is not working

Question

I have created a grid using UI component. in this grid, I display only grid I don't need to display button <buttons></buttons>. gird is working perfectly when I scroll down in grid page sticky CSS is not working and grid layout is brek.

When I add a button using <buttons></buttons> and scroll down element sticky grid is working fine but if I remove button <buttons></buttons> (I remove button because I don't want) and scroll down sticky grid is not working.

What actual result :

What Expected result :

It is default Magento bug I Report an issue on GitHub

Any help would be appreciated! Thanks.

Answer 1

There are two ways to solve this

1st way

Remove the sticky tool from the uicomponent ie.Remove these lines from the ui component

<settings>
<sticky>true</sticky>
</settings>

2nd way

Override the app/code/Magento/Ui/view/base/web/js/grid/toolbar.js in app/design/frontend/VendorName/ThemeName/Magento_Ui/view/base/web/js/grid/toolbar.js and add the if condition as given below

    show: function () {
    this.visible = true;
    //Add this if condition in the override js file 
    //Check admin grid button has added not 
    if ($('.page-main-actions').length === 0) {
        this.$sticky.style.top = 0;
    }
   //End of the condition
    this.$sticky.style.display = '';
    this.$toolbar.style.visibility = 'hidden';

Hope it Solves .Happy Coding :)