"In table dropdown" and "Scroller" extension

MarkAndersonUK

Hi,

I noticed that if I use the DEMO of "In table dropdown" (https://editor.datatables.net/examples/triggering-editing/inTableDropdown.html) and enable 'SCROLLER' extension, the 'Action' button drop-down doesn't
overflow the table and instead gets cut off and a new vertical scroll bar appears... Here are some screenshots (from my app, but basically the same as the demo).

**Working with Scroller turned off. **

**Not working, only change is Scroller turned on. **

---

Any CSS gurus that might point me to the correct changes I need to make when using scroller would be appreciated.

thanks

kthorngren

I believe the issue is discussed in this thread. The key is this comment from Allan:

The issue is that the header container must have overflow: hidden - otherwise the parts that are out of scroll view would be visible

If you change the option scrollY size to include more rows you should see part or all of the button dropdown.

I made this simple test case:
https://live.datatables.net/guwafemu/608/edit

Changed the CSS to use position: fixed:

div.dropdown {
    display: none;
    position: fixed;

And changed the selector to append the dropdown the `

table.on('click', 'button.dropdown', function (e) {
    e.stopPropagation();
 
    tr = this.closest('tr');   // Assign the closest clicked tr to the global tr varaible
    // Display and position the dropdown
    actions.appendTo( '#example thead' ).css({

The button click events will need changing as well. The test case has a glable tr varaible created and it is set in the button.dropdown click event, shown above. This variable is used as the target for the edit operations in the button click events, for example:

// Edit button
table.on('click', 'button[value="edit"]', function (e) {
    editor.edit(tr, {

@allan or others may have better suggestions.

Kevin

MarkAndersonUK

thankyou @kthorngren , i missed that thread when I searched. I assumed it was exactly this and related to the need for scroller to hide overflow to work.

my 'scrollY' setting is basically 100vh (minus a little bit for overhead), and the problem only really affects me on the last few rows of the page, or when a 'search' filter is applied which causes the returned row count to drop to 1 or 2).

  I am interested in your demo and using a fix appending the actions to the thead.      however,  for some reason the link you gave doesn't work for me and I get a cloudflare timeout at the host when I try to access the live.datatables.net  site.        

Perhaps you could PM me the javascript code you used?

Luckily I am not using the editor.edit ( due to requirements I wrote a separate editor page that I call).

Thanks again for all your information.

Regards.

kthorngren

Looks like the live.datatables.net site is down at the moment. Once @allan brings it back up you should be able to access the code.

Kevin

allan

Apologies - it is back up now!

Allan

MarkAndersonUK

thanks you both @kthorngren and @allen