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

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

DerrickG72DerrickG72 Posts: 10Questions: 1Answers: 0

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!

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • DerrickG72DerrickG72 Posts: 10Questions: 1Answers: 0

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

  • DerrickG72DerrickG72 Posts: 10Questions: 1Answers: 0

    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.

  • DerrickG72DerrickG72 Posts: 10Questions: 1Answers: 0

    I also played around with this:

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

    It made the table bigger but still not scrollable.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • DerrickG72DerrickG72 Posts: 10Questions: 1Answers: 0

    allan, I have removed the code from custom css.

  • DerrickG72DerrickG72 Posts: 10Questions: 1Answers: 0

    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.

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    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?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • DerrickG72DerrickG72 Posts: 10Questions: 1Answers: 0

    I tried adding this to the css:

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

    but it didnt do anything.

  • DerrickG72DerrickG72 Posts: 10Questions: 1Answers: 0

    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.

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    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

  • DerrickG72DerrickG72 Posts: 10Questions: 1Answers: 0

    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!

  • DerrickG72DerrickG72 Posts: 10Questions: 1Answers: 0

    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?

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

  • HPBHPB Posts: 73Questions: 2Answers: 18

    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?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

This discussion has been closed.