Removing column sorting arrows
-
since the latest update to TablePress, the sorting arrows that appear at the top of my table columns have re-appeared, despite my having put in place custom CSS to remove them (while maintaining the ability to sort), per previous solutions shared here.
Were there any changes to the classes or other identifies that would render the older custom CSS no longer usable? What would be the fix?
thanks,
G
-
Hi,
thanks for your post, and sorry for the trouble.
This happened because I had to make a change to the HTML/CSS structure of the sorting arrows. Unfortunately, that change made the arrows visible again for everybody who had them hidden.
To hide them again, please replace the “Custom CSS”
.dataTables_wrapper .tablepress-id-1 .sorting div:after, .dataTables_wrapper .tablepress-id-1 .sorting_asc div:after, .dataTables_wrapper .tablepress-id-1 .sorting_desc div:after { content: ""; }with
.dataTables_wrapper .tablepress-id-1 .sorting:after, .dataTables_wrapper .tablepress-id-1 .sorting_asc:after, .dataTables_wrapper .tablepress-id-1 .sorting_desc:after { content: ""; }(for all three tables 1, 2, and 3 where you are using this).
In essence, the ” div” part has to be removed from the three blocks.Regards,
TobiasWorked perfectly – thanks!!
G
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Best wishes,
TobiasThis isn’t working for me. The sort arrows still show up.
I put in:
.dataTables_wrapper .tablepress-id-14 .sorting div:after, .dataTables_wrapper .tablepress-id-14 .sorting_asc div:after, .dataTables_wrapper .tablepress-id-14 .sorting_desc div:after { content: ""; } .dataTables_wrapper .tablepress-id-14 .sorting, .dataTables_wrapper .tablepress-id-14 .sorting_asc, .dataTables_wrapper .tablepress-id-14 .sorting_desc { content: ""; }…into the “Frontend Options”
Hi,
thanks for your post, and sorry for the trouble.
Please put in only
.dataTables_wrapper .tablepress-id-14 .sorting:after, .dataTables_wrapper .tablepress-id-14 .sorting_asc:after, .dataTables_wrapper .tablepress-id-14 .sorting_desc:after { content: ""; }If that’s not working, please post a link to the page with the table where this problem happens, so that I can take a direct look. Thanks!
Regards,
TobiasThanks so much for the help Tobias. I sent you a donation for the plugin a while back because it is awesome!
Anyways, that worked 🙂
I have one other question:
Is it possible to apply the “Compact” data tables class to Tablepress?
I’ve been trying to get a myriad of data tables things working with your plugin to no avail.Thanks,
TomHi Tom,
that’s good to hear. Thanks for the confirmation!
And thanks for having donated, I really appreciate it!
Can you please elaborate what you mean with “compact” data tables class? I’m not really sure what you mean here.
Regards,
Tobiashttps://datatables.net/examples/styling/compact.html
Pretty sure it makes the full width of the table fluid upon the content inside.
Hi,
ah, thanks for the link. This CSS class simply reduces the padding in the table. You can achieve the same by adding e.g.
.tablepress th, .tablepress td { padding: 4px 5px; }to the “Custom CSS”.
Regards,
TobiasThanks again Tobias.
That looks a bit better; however, it doesn’t seem to change the full width of the entire table. My tables all default to fit to page.
Is there a way to get the table to fit to data rather than fit to page width?
Hi,
yes, by default tables stretch to 100% of the page. To change that, please try e.g.
.tablepress-id-123 { width: auto; }Regards,
TobiasThanks Tobias. I did:
.tablepress { width: auto; }for all tables on my site. Worked for some, but not all.
For example, didn’t work on this one (and I don’t have any other css for this specific table. http://procomputergambler.com/nba/
Also, on tables where it does work, it leaves the Search box way over on the right side of the page.
Here is an example of where it did work, but left the search box way to the right. http://procomputergambler.com/cbb/
Also, do you see under ‘Team’ how ‘Va’ and ‘Commonwealth’ went to two lines?
How can I make that not happen?Hi,
this does not work on the /nba/ table as that is using the Horizontal Scrolling feature of the DataTables JS library. That requires full width tables. So, just turn that checkbox off to make the table more narrow.
The problem with the search field is coming from the fact that the container around the table is still 100% wide. Unfortunately, that can not be made to just shrink to the size of the table, so that you’d have to set a width manually, e.g.
.dataTables_wrapper { width: 60%; }To prevent the word-wrapping of “Va Commenwealth”, you could use
.tablepress-id-6 .column-3 { white-space: nowrap; }Regards,
TobiasThanks so much Tobias. That works.
I have one other question if you don’t mind 🙂
I want a chart (like the one in the sidebar at http://www.procomputergambler.com) to be centered on its page. How do you center a chart.
I tried this as I saw it as a solution in another thread, but it doesn’t work:
.tablepress-id-10 { width: auto; margin: 0 auto 1em; }(from here: https://tablepress.org/faq/center-table-on-the-page/)
The topic ‘Removing column sorting arrows’ is closed to new replies.