Center, Sort and Highlight issue

  • Resolved blantoine

    (@blantoine)


    4 years, 9 months ago

    Hi Tobias,

    First, thanks for this plugin; it’s super handy!
    But as I’m a newbie with CSS and such, I’m facing a few issues…

    1: Centering the table, you’ll see that the first table is not centred on the page.
    I’ve tried with

    .tablepress-id-1 {
    width: auto;
    margin: 0 auto 1em;
    }

    and

    .tablepress-id-1 {
    width: auto;
    margin: 0 auto 1em !important;
    }

    I also tried with

    `.tablepress.your-class {

    margin-left: auto;
    margin-right: auto;

    Without success. It keeps aligning to the left. I also tried to set the table at 100% (I can’t find the code anymore) with the same lack of success. Oh, and I’m not sure if you’ll ask me to change the template’s width, but if there’s another way, I’ll rather not do that; I’m not the one who designs the site, so that might be complicated.

    2. When I hover over the header, the colour changes, and that’s perfect, but when I click to sort the column, the header keeps the hover’s colour. Is there a way to change that? I’ll rather keep the default colour.

    3. Automatically, all columns can be sorted. Is there a way to allow solely certain columns to be sorted?

    I really looked around to see if I could find a way without bothering you, but I didn’t. Sorry if you already resolved these somewhere else!

    Thanks a lot!

    Antoine

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    4 years, 9 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    1. The reason why the code is not working is that the table uses the JavaScript features. Due to that, a slightly extended version of the “Custom CSS” code is needed:

    .dataTables_wrapper .tablepress-id-1 {
  width: auto;
  margin: 0 auto !important;
}

    2. For that, please replace

    .tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
	background-color: #FFD600;
	color: #FFFFFF;
}

    with

    .tablepress thead .sorting:hover {
	background-color: #FFD600;
}
.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc{
	background-color: #00A191;
}

    3. This can be achieved by adding a “Custom Command” on the table’s “Edit” screen. For example,

    "columnDefs": [ { "orderable": false, "targets": [ 1, 2 ] } ]

    would turn off sorting for the second and third column of a table (counting the columns starts with 0 for the first column).

    Regards,
    Tobias

    Thread Starter blantoine

    (@blantoine)

    4 years, 9 months ago

    Wow,

    Tks a lot for that quick answer!

    So I tried everything you suggested and here are the results.

    At first, nothing worked, but after a few refreshes, the #1 did, so YEAH! But even when #1 worked, #2 didn’t.

    Also, of the two tables on the page, one doesn’t need any sorting, so I disable the option for that one. At the same time, I added the custom CSS on the other one as suggested, but somehow the sorting option was disabled on both tables, and I double-checked to make sure that the option was disabled on the first one and enabled on the second one! Then I refreshed a few times; it still doesn’t work.

    So as the sorting option is disabled, I can’t be sure if the codes suggested for resolving #2 and #3 issues are working. Do you have any idea why it is doing that? Any fix for it?

    Thank you!

    Antoine

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    4 years, 9 months ago

    Hi,

    please try inserting that “Custom Command”

    "columnDefs": [ { "orderable": false, "targets": [ 1, 2 ] } ]

    exactly like this again (from the forums page, and not e.g. from the notification email or a translated page). It seems like you copy/pasted a modified version, where all " have been replaced by their entity representation ".
    Also make sure to adjust the column numbers in the targets part of the code for the respective table.

    After that, things should work fine again.

    Regards,
    Tobias

    Thread Starter blantoine

    (@blantoine)

    4 years, 9 months ago

    Then there was light!

    Indeed I copied-paste from my email the first time, and I admit that I found the code quite odd.

    All is well now, and I’m really grateful for your presence/patience, help and plugin, obviously!

    THANKS AGAIN!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    4 years, 9 months ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias
     
    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Center, Sort and Highlight issue’ is closed to new replies.