DataTables FixedHeader does not work here

  • Resolved aschrader

    (@aschrader)


    5 years, 1 month ago

    Hello Tobias,

    I have a similar request to this one:

    https://wordpress.org/support/topic/tablepress-sticky-header/

    I would like to see the header stick to the top of the window (no gap needed) as my table is quite long and I don’t want to use a pager.

    In the css section (Plugin Options) I defined the following:

    •••••••••••••••••••••••••••••••••••••••••••••••
    /* Yellow rallycross.com header and footer */
    .tablepress thead th,
    .tablepress tfoot th {
    background-color: #fffad1;
    }

    /* In general first column is bold and right-aligned.
    Can be overwritten by individual table */
    .tablepress .column-1 {
    font-weight: bold;
    text-align: right;
    }

    /* Standings WRX Drivers 2018*/
    .tablepress-id-2 .column-4,
    .tablepress-id-2 .column-5,
    .tablepress-id-2 .column-6,
    .tablepress-id-2 .column-7,
    .tablepress-id-2 .column-8,
    .tablepress-id-2 .column-9,
    .tablepress-id-2 .column-10,
    .tablepress-id-2 .column-11,
    .tablepress-id-2 .column-12,
    .tablepress-id-2 .column-13,
    .tablepress-id-2 .column-14,
    .tablepress-id-2 .column-15 {
    text-align: right;
    }
    .tablepress-id-2 .column-16 {
    font-weight: bold;
    text-align: right;
    }

    /* Make header sticky if argument is used */
    .tablepress .fixedHeader-floating {
    z-index: 1000 !important;
    }
    •••••••••••••••••••••••••••••••••••••••••••••••

    The table is referenced using this shortcode in a page:

    [table id=2 datatables_fixedheader=top /]

    Looking forward to hearing from you soon.

    TablePress is a great plug-in and in case we get this to work, it will enhance the new version of my website very much.

    Best regards,

    Andreas

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • Thread Starter aschrader

    (@aschrader)

    5 years, 1 month ago

    Oh, I forgot to say that I tried inserting the “.tablepress .fixedHeader-floating” style also at the beginning of the css definition.

    • This reply was modified 5 years, 1 month ago by aschrader.
    Plugin Author TobiasBg

    (@tobiasbg)

    5 years, 1 month ago

    Hi,

    thanks for your question, and sorry for the trouble.

    Is the TablePress Extension from https://tablepress.org/extensions/datatables-fixedheader/ that is necessary for this actually installed and activated?

    Regards,
    Tobias

    Thread Starter aschrader

    (@aschrader)

    5 years, 1 month ago

    Hi Tobias,

    That was quick. Yes I downloaded the file from there.

    The header of the file tablepress-datatables-fixedheader.php shows version 1.5, which I believe is the latest.

    /*
    Plugin Name: TablePress Extension: DataTables FixedHeader
    Plugin URI: https://tablepress.org/extensions/datatables-fixedheader/
    Description: Extension for TablePress to add the DataTables FixedHeader functionality
    Version: 1.5
    Author: Tobias Bäthge
    Author URI: https://tobias.baethge.com/
    */

    Thread Starter aschrader

    (@aschrader)

    5 years, 1 month ago

    I did not copy the contents via FTP. I used the menu item Plug-ins in the WordPress backend and uploaded the .zip archive.

    Plugin Author TobiasBg

    (@tobiasbg)

    5 years, 1 month ago

    Hi,

    that’s all correct. But did you also activate the Extension as a plugin?

    Regards,
    Tobias

    Thread Starter aschrader

    (@aschrader)

    5 years, 1 month ago

    Yes, I did active it. It is listed below TablePress:

    https://rallycross.com/asc_screenshots/plug-in_is_active.png

    Best regards,

    Andreas

    Plugin Author TobiasBg

    (@tobiasbg)

    5 years, 1 month ago

    Hi Andreas,

    that’s strange then. Is the “Use DataTables” checkbox on the table’s “Edit” screen checked? (The individual feature can be turned off.)

    Regards,
    Tobias

    Thread Starter aschrader

    (@aschrader)

    5 years, 1 month ago

    There we go! That was the problem. Sorry, I did not want people to sort or filter the stuff so I used the general switch.

    Now that it works, I see a strange kind of compression of the contents as soon as the header touches the top of the window. Any idea what causes this?

    Best regards,

    Andreas

    • This reply was modified 5 years, 1 month ago by aschrader.
    Plugin Author TobiasBg

    (@tobiasbg)

    5 years, 1 month ago

    Hi Andreas,

    this might be caused by a problem where the DataTables JS library can not properly calculate the column widths.

    Can you maybe try adding this PHP code to your theme’s “functions.php” file?:

    
add_filter( 'tablepress_table_tag_attributes', 'tablepress_responsive_100_percent_width', 10, 3 );
function tablepress_responsive_100_percent_width( $table_attributes, $table, $render_options ) {
  $table_attributes["style"] = "width:100%";
  return $table_attributes;
}

    Regards,
    Tobias

    Thread Starter aschrader

    (@aschrader)

    5 years, 1 month ago

    Hi Tobias,

    I added the code at the end of the funtions.php file and it does not fix the problem. Firefox and Chrome under macOS are the same and Safari adds the floating header line too early now.

    Any further idea? Should I send you my funtions.php file? I am using a theme called Merlin (https://de.wordpress.org/themes/merlin/) and did not change the file so far.

    Best regards,

    Andreas

    Plugin Author TobiasBg

    (@tobiasbg)

    5 years, 1 month ago

    Hi Andreas,

    could you please edit that table (some dummy change is fine) and save it again?(This is necessary to clear the cache, so that this code actually is used.)

    Regards,
    Tobias

    Thread Starter aschrader

    (@aschrader)

    5 years, 1 month ago

    Hi Tobias,
    I am sorry to say that this did not fix the problem. I saved the table, I saved the page. I verified that your code is inside the funtions.php file.

    The problem remains.

    More ideas?

    Best regards,

    Andreas

    Plugin Author TobiasBg

    (@tobiasbg)

    5 years, 1 month ago

    Hi Andreas,

    thanks for that! Can you please also add this to the “Custom CSS”:

    .tablepress {
  border-collapse: separate !important;
}

    Regards,
    Tobias

    Thread Starter aschrader

    (@aschrader)

    5 years, 1 month ago

    Hi Tobias,

    I added it at the end of my custom css and changed the table (probably not needed this time).
    I checked it against Safari, Firefox and Chrome – no success. I am really sorry.

    Best regards,

    Andreas

    Plugin Author TobiasBg

    (@tobiasbg)

    5 years, 1 month ago

    Hi Andreas,

    ok, bummer. Unfortunately, I’m out of ideas here then 🙁 It seems that the external JS code for the DataTables FixedHeader JS script has some sort of bug here, unfortunately 🙁

    Regards,
    Tobias

Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • The topic ‘DataTables FixedHeader does not work here’ is closed to new replies.