Support » Plugin: TablePress » No stickey table header on iPad/mobile

  • Resolved keesjan

    (@keesjan)


    Hi, first of all thank you for this great table plugin.
    I use your plugin with this settings:
    [table id=1 responsive=collapse datatables_fixedheader=top datatables_fixedheader_offsettop=60 convert_line_breaks=false /]
    I have installed it on https://staging.seoeffect.com/nl/seo-effect-prijzen/
    I want to have a sticky header. When emulate a smartphone or iPad in chrome, its not sticky. In normal desktop modus it works! Any idea?

    · TablePress: 1.7
    · TablePress Extension: DataTables FixedHeader 1.3
    · TablePress Extension: Responsive Tables 1.3
    · TablePress (DB): 32
    · TablePress table scheme: 3
    · Plugin installed: 2016/09/30 17:22:01
    · WordPress: 4.6.1
    · Multisite: no
    · PHP: 5.6.10
    · mysqli Extension: true
    · mySQL (Server): 5.6.19
    · mySQL (Client): mysqlnd 5.0.11-dev – 20120503 – $Id: 3c688b6bbc30d36af3ac34fdd4b7b5b787fe5555 $
    · ZIP support: yes
    · UTF-8 conversion: yes
    · WP Memory Limit: 512M
    · Server Memory Limit: 512M
    · Magic Quotes: off
    · WP_DEBUG: false
    · WP_POST_REVISIONS: true

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    The header is there, it’s just hidden behind the text. Please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress.fixedHeader-floating,
    .tablepress.fixedHeader-locked {
        z-index: 10000;
    }

    Regards,
    Tobias

    mm, is it possible with the “datatables_fixedheader_offsettop=60” in de shortcode to differentate offsettop for mopbile and desktop/ipad?

    Will stikcy header shortcode work with additainel css?

    Or do we need then datatables_fixedheader=top with an override for desktop that makes to offset 60?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    I see what you mean, but I’m afraid that this is not possible (or at least, I don’t know a solution for it). Setting the offset dynamically is not something that the JS library supports easily 🙁

    Regards,
    Tobias

    oke, I understand.
    I now have no sticky header anymore ;-(

    Do you understand why?
    shortcode: [table id=1 responsive=collapse datatables_fixedheader=both datatables_fixedheader_offsettop=60 convert_line_breaks=false /]

    css:
    .tablepress thead th,
    .tablepress tfoot th {
    background-color: #e28913;
    }

    .tablepress-id-1 td {
    position: relative;
    }

    .tablepress .header2-tablepress {
    text-transform: uppercase;
    font-weight: bold;
    }

    .tablepress .headertop-tablepress {
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    }

    .tablepress.fixedHeader-floating,
    .tablepress.fixedHeader-locked {
    z-index: 10000;
    }

    I have in the header a class <span class=”headertop-tablepress”>Free</span> for eeach cell. Is that causing the problem?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    the problem is the #colspan#s in your table. The DataTables JS library does not support that, and as it’s a requirement for the FixedHeader, that also breaks.

    So, just remove all #colspan# from the table and the FixedHeader should work again.

    Regards,
    Tobias

    Hi Tobias, keesjan here agian 😉

    I just updated to version 1.8 and the sticky columns as acting strange…

    see https://www.seoeffect.com/nl/seo-effect-prijzen/
    the header text changes in such a way when it becomes sticky that teh words are truncated?

    Any solution?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    this seems to be caused by your theme.
    To fix it, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress

    .tablepress thead th {
      word-wrap: normal;
    }

    Regards,
    Tobias

    Hi Tobias, thnaks for the quick reply.
    its better now, but still the columns names move to the right when become stickey.
    costum css is now:

    .tablepress thead th,
    .tablepress tfoot th {
    background-color: #646D72;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff;
    }

    .tablepress.fixedHeader-floating,
    .tablepress.fixedHeader-locked {
    z-index: 10000;
    }

    .tablepress .header2-tablepress {
    text-transform: uppercase;
    font-weight: bold;
    }

    .tablepress .headertop-tablepress {
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff;
    }

    .tablepress thead th {
    word-wrap: normal;
    }

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    that’s indeed very strange, but to be honest, I have no clue why this happens :-/

    First (due to the update) there’s a small change necessary in your “Custom CSS”. Please change the line
    z-index: 10000;
    to
    z-index: 10000 !important;

    Then, you could maybe try setting manual column widths, using https://tablepress.org/faq/column-widths/ (I recommend using percentage values).
    If that does not help, I can only recommend to ask in the forums at https://www.datatables.net/ where the developer of the FixedHeader JavaScript might be able to help.

    Regards,
    Tobias

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘No stickey table header on iPad/mobile’ is closed to new replies.