DataTables fixedHeader and Bootstrap nav-bar with fixed-top

DataTables fixedHeader and Bootstrap nav-bar with fixed-top

VolkhardVVolkhardV Posts: 20Questions: 5Answers: 0

Hello,
i´m using Datatables with a fixedHeader:true and a bootstrap nav-bar with fixed-top-class.
When i scroll down the page the table header disapperars. My expectation is, that the table-header should be fixed to the bottom of the nav-bar. When i remove bootstrap´s fixed-top it works - but then the page-header disappears on scrolling.

Here is a sample link: https://customer.vogeler-ag.de/obi/intranet/test

Can anyone help?
best regards
Volkhard

Replies

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

    I'm not seeing where you include the FixedHeader extension js.
    https://datatables.net/extensions/fixedheader/

  • VolkhardVVolkhardV Posts: 20Questions: 5Answers: 0
    edited June 2020

    Hello Tangerine,
    now i added the fixedHeader-Extension - but it also doesn´t work.

    best regards

    Volkhard

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    edited June 2020

    I suspect the problem is because your site already has a fixed header, the OBI strip at the top. You'll need to set an offset for the DataTable's fixed header to ensure it goes beneath. These two examples, here and here, should get you going,

    Colin

  • VolkhardVVolkhardV Posts: 20Questions: 5Answers: 0

    Hello Colin,
    thanks - this helps.:)

    One more Question: it is also possible to fix the area of the DOM-Elements (PageLength-Control, Search-Control, etc..)?

    best regards

    Volkhard

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

    Placement of the table controll elements is determined by the dom options.
    https://datatables.net/reference/option/dom

  • VolkhardVVolkhardV Posts: 20Questions: 5Answers: 0

    Hello tangerine,

    thanks for this.
    i wasn´t successfull with this - how can i fix the dom-elements together with the table-header? where do i have to place the dom-elements?

    best regards

    Volkhard

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

    i wasn´t successfull with this

    Why not? What did you do? What happened?

    how can i fix the dom-elements together with the table-header?

    I don't understand the question. Placement of table control elements is independent of fixedHeader.

    where do i have to place the dom-elements?

    dom definition goes in your DataTables initialization code, as clearly shown in the link I gave you.

  • VolkhardVVolkhardV Posts: 20Questions: 5Answers: 0

    Hello Tangerine,
    sorry - i was explaining bad.

    On the testpage https://customer.vogeler-ag.de/obi/intranet/test you can see under the Headline "index" the dom-controls (e.g. pagelength, filter).
    When you scroll down the page, those dom-controls disappear.
    I want to fix them too together with the table-header: so those controls are also visible when you scroll down the page.

    best regards

    Volkhard

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    See if this thread helps.

    Kevin

  • VolkhardVVolkhardV Posts: 20Questions: 5Answers: 0

    Hello Kevin,

    yes - thanks! this helps!

    best regards

    Volkhard

This discussion has been closed.