1

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 :

enter image description here

What Expected result :

enter image description here

It is default Magento bug I Report an issue on GitHub

Any help would be appreciated! Thanks.

|improve this question
  • 1
    Have you check consol or log file? – Dhiren Vasoya May 3 at 4:59
  • I have checked everything, you can try with any admin grid using Ui component just remove Button displaying above grid and check sticky CSS is not working. – Chirag Patel May 3 at 5:01
3

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 :)

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.