Tables in Tabs – Location of Next/Previous Links

  • Resolved morts81

    (@morts81)


    7 years, 10 months ago

    Tobias

    I’m trying to consolidate tables into one page and to do that I’m using tabs. I’ve read a number of the previous posts but can’t quite find a solution.

    I’m finding the tablepress table in the first tab working perfectly fine. The second tab however once clicked shows the table ok but I notice the Previous and Next links are at the top of the table over some of the cells. If I click on one of these then they move to the correct location at the bottom of the table and the “Showing 1 to 20 of 815 entries” pops up.

    I believe this may have something to do with the <div> element not recognising the height of the table until the Next or Previous link is clicked. I’ve tried wrapping the table short code in a <div style = “height:600px”></div> but this doesn’t fix the table.

    Any ideas?

    Code is below.

    [ Code that defies fixing redacted ]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    The problem here most likely is the tabs: On all but the first tabs, the content is initially hidden by the browser. This has the negative side effect that the JavaScript code can not properly calculate the width and height of some table elements – which it however needs for the proper positioning of the elements.
    Putting an extra wrapper around the Shortcode will probably not help, as that will not increase the size of the child elements inside it. You could maybe try adding CSS code to directly set the height of the elements, but even that will be tricky.
    In the end, I’m afraid, this comes down to the conclusion that showing tables that use the DataTables JS functions inside tabs is not really going to work well :-/

    Regards,
    Tobias

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    could a moderator maybe fix the broken HTML in the first post? Thanks! ??

    Best wishes,
    Tobias

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    After multiple attempts the code refused to cooperate and I redacted it.

    Please use pastebin.com and share that link instead.

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks, Jan!
    The suggestion with pastebin.com for such large pieces of code is good!

    Regards,
    Tobias

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Tables in Tabs – Location of Next/Previous Links’ is closed to new replies.