Bug or feature request: scrollcolapse required to make bootstrap tabs work

Bug or feature request: scrollcolapse required to make bootstrap tabs work

WEHAWEHA Posts: 8Questions: 1Answers: 0
edited June 2019 in Free community support

Recently I switched from jqueryui to bootstrap, and since then I'm experiencing the issue that when I use datatables in a tab with scroller on only the first 2 rows show.
I used the shown.bs.tab hook to enable datatable in tabs, but I did not see that scrollCollapse was enabled as well.
Though it's not mentioned in the explanation: https://datatables.net/examples/api/tabs_and_scrolling.html

When I enable this, everything works like a charm, only that I don't want scrollCollapse.
So my question is, is this a bug or should I request this feature to make it work without scrollCollapse? :smile:

Example: https://jsfiddle.net/_WEHA_/7h0brczk/9/
Here scrollCollapse is disabled so if you go to the second tab you'll see that only the first 2 of 57 entries is visible.
Setting scrollCollapse to true will make it work, but this is only interesting when the amount of lines sets the height to the desired setting.

Thanks!

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 7,697Questions: 0Answers: 1,297

    Hi @WEHA ,

    It's because you've set

                    "displayBuffer": 2,    // load n items for everscrool formula: (height / rowheight) * displayBuffer (default: 9)
    

    If you remove that, everything works as expect.

    Cheers,

    Colin

  • WEHAWEHA Posts: 8Questions: 1Answers: 0

    I see what's happening.. but it seems fixable to me that the predefined height in the options is used to calculate the displaybuffer instead of the elements at the time of init?

  • WEHAWEHA Posts: 8Questions: 1Answers: 0

    Actually, this does not "fix" it at all, there's just more lines so it would seem fixed.
    You can tell by the results info, line range is equal and does not show a range.
    You can set the height higher, the same problem will occur

  • WEHAWEHA Posts: 8Questions: 1Answers: 0

    I suppose I can't tag this as a bug myself? Unless I'm doing something else wrong and it isn't a bug :smile:

  • allanallan Posts: 51,272Questions: 1Answers: 7,724 Site admin

    I'm not 100% clear on the issue I'm afraid. If you remove the displayBuffer option like Colin suggested, does it not work for you?

    Allan

  • WEHAWEHA Posts: 8Questions: 1Answers: 0

    No, this just makes the initial list longer.
    I've updated the example for your convenience, just scroll down in the datatable and you'll see that it's bugged.

  • colincolin Posts: 7,697Questions: 0Answers: 1,297

    You'll need to link to the example.

  • WEHAWEHA Posts: 8Questions: 1Answers: 0

    You mean the one in the original post? :smile:

  • WEHAWEHA Posts: 8Questions: 1Answers: 0

    Seems I did not see the version tag at the end in the url (I'm new at jsfiddle)
    Link: https://jsfiddle.net/_WEHA_/7h0brczk/13/

  • allanallan Posts: 51,272Questions: 1Answers: 7,724 Site admin
    Answer ✓

    Thank you!

    I've made a couple of changes:

    1. Removed jQuery and DataTables includes from the HTML section of JSFiddle since they were already in the resources. That was causing part of the issue.
    2. Add a call to scroller.measure() after doing the column resizing for exactly the same reason.
    3. Add table table-striped table-bordered as the class for the table to get a Bootstrap styled table.

    Allan

  • WEHAWEHA Posts: 8Questions: 1Answers: 0

    Excellent, scroller.measure() fixed it for me.
    Maybe add this to the documentation on https://datatables.net/examples/api/tabs_and_scrolling.html if scroller is used?

    Thanks!

  • nickpapoutsisnickpapoutsis Posts: 10Questions: 2Answers: 0

    Can confirm, scroller.measure() fixed the same issue for me.

Sign In or Register to comment.