How to get "scrollX":true} to work in my Wordpress Theme

DerrickG72

Hello, I am very new to DataTables and I am stuck! I am using wordpress as my backend and I have one page that has a rather long excel file. I am using Inline Google Spreadsheet Viewer module to display my sheet and in the datatables defaults object I have this:

{"dom":"B<'clear'>lfrtip","buttons":["colvis","copy","excel","pdf","print"],"scrollX":true}

The problem is the scroll does not appear like it does on the example page https://datatables.net/examples/basic_init/scroll_x.html from this site.

Can anyone tell me how to achive the bottom scroll?

Thanks!

allan

Happy to take a look into it if you can post a link to a page showing the issue. As you note, the example appears to be working correctly.

Allan

DerrickG72

Allen, I sent you a login for my site. I just cant get this table thing to work right. I just want it to be scrollable inside the window... not sure why it isnt working.

:::::frustrated::::::

DerrickG72

I did add this line of CSS: .dataTables_wrapper {min-width: 3300px; margin: 0 auto; }
which made the entire sheet scrollable from the bottom of the browser window but it doesn't make the actually table scrollable and it looks terrible.

DerrickG72

I also played around with this:

div.dataTables_wrapper {
width: 100%;
margin: 0 auto;
}

It made the table bigger but still not scrollable.

allan

Thanks for the PM with the link.

The page has:

.dataTables_wrapper {
    min-width: 3300px;
    margin: 0 auto;
}

So the wrapper element is never going to be smaller that 3300px. Could you remove that CSS please and I'll try the page again.

Thanks,
Allan

DerrickG72

allan, I have removed the code from custom css.

DerrickG72

now that the code has been removed I get to see a scroll bar on the bottom of the sheet. The problem now is the scroll bar doesnt scroll to the end of the sheet. It doesnt scroll at all.

tangerine

What are you calling the "end" of the sheet? Width or length? If width, how many columns are you expecting and how are you pulling them into DataTables?

allan

Try adding the nowrap class to your table element. That should hopefully help. At the moment the browser is forcing the table contents to wrap so it shows as much as possible of the content.

Allan

DerrickG72

I tried adding this to the css:

tr.nowrap { white-space:nowrap; }
td { white-space:inherit; }

but it didnt do anything.

DerrickG72

Hey Tangerine, the end would be the width. I am using a plugin called Inline Google Spreadsheet Viewer Settings. And it seems to work well if your spreadsheet is smaller then the width of the page wrapper. The sheet I am trying to display with a scroll bar has 25 columns. Only 10 columns show and the scroll doesn't scroll through the entire spreadsheet. It just stops at 10 and then you have to use the green icon to drop down the rest of the columns to view.

tangerine

So the "missing" columns appear as DataTables' child rows? Is that intentional? (i.e. did you implement this example somehow )
https://datatables.net/examples/api/row_details.html

DerrickG72

tangerine, Thats not really what I am looking for. I want to have this example in my site: https://datatables.net/examples/basic_init/scroll_x.html

so I put this line into datatables defaults object:
{"dom":"B<'clear'>lfrtip","buttons":["colvis","copy","excel","pdf","print"],"scrollX":true}

Which I assumed would give me the horizontal scroll in the container... but all it does is show the bar with no scroll. I seem to be missing something here!

DerrickG72

This seems to be a better example:

https://datatables.net/examples/basic_init/scroll_xy.html

If I were to use this example inside wordpress, I would have to include these:

//code.jquery.com/jquery-1.12.4.js
https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js

ANd link them to my stylesheet? Is that right?

tangerine

My question was, did you implement DataTables' child rows?
Alternatively, how did you get the green icons into your table?

HPB

It's going to be hard to get any good help without a working test case demonstrating your issue.

Is it possible for you to make a dummy page, with dummy data for us to look at?

allan

tr.nowrap { white-space:nowrap; }

Did you also add a class of nowrap to your table rows?

The DataTables stylesheet has a nowrap class if you just add that to your table element.

Allan