How do you get the DTE buttons to stick/affix after scrolling?

koniahin

In Datatables Editor table view we have the editing buttons positioned above the table:

New - Edit - Delete

My pages use a fixed position navbar at the top of the page occupying about 60 px height. Upon scrolling I would like to have the buttons scroll then stick to the top just below the navbar so that they remain visible as we keep scrolling. Here is the CSS I tried which does not work:

    .button-group,
    .dt-buttons {
      position: sticky !important;
      top: 0px; 
      top: 60px; 
      z-index: 100000; 
      background: white; 
      padding: 10px 0; 
    }

Tx

allan

position: sticky is a funny one. I'm not 100% sure why the browser doesn't apply it there - possibly because it is the child of a flex element and "stickying" it would mess with that?

If you apply position: sticky to the container row instead then it should work nicely: https://live.datatables.net/jorutoji/123/edit .

Allan