TablePress in Inked Filter Accordion

Hi,

thanks for your post, and sorry for the trouble.

Usually, this is only a problem if the JS features are active, as the width can then not be calculated by the browser (because the table is not initially visible in the accordion). Can you try again after unchecking the “Use DataTables” checkbox on the table’s “Edit” screen?
If that’s not it, can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Hi Tobias! I have tried to uncheck checkbox but the problem is still there..
Here is the link https://orljavac.com.hr/povijest/

Thanks!

Hi,

thanks for the link! This is caused by some bad behavior by the accordion plugin. Instead of using a wrapping container, it’s directly setting CSS attributes on the content of the accordion.

To work around this, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.accordion .accordion-navigation > .content.active .tablepress {
	display: table;
}
.accordion .accordion-navigation > .content.active .tablepress thead {
	display: table-header-group;
}
.accordion .accordion-navigation > .content.active .tablepress tbody {
	display: table-row-group;
}
.accordion .accordion-navigation > .content.active .tablepress tr {
	display: table-row;
}
.accordion .accordion-navigation > .content.active .tablepress th,
.accordion .accordion-navigation > .content.active .tablepress td {
	display: table-cell;
}

Regards,
Tobias

Tobias thank you!!!! ??

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!

Tobias, I am sorry I have one more question about buttons Previous and Next. Next is in below Previous. Why isn’t it in the same row?
Thank you!

Hi,

for the same reason: That accordion is programmed in a rather unlucky way.

Please also add this to the “Custom CSS”:

.accordion .accordion-navigation > .content.active .dataTables_paginate a {
	display: inline-block;
	background: transparent;
	padding-right: 0;
}

Regards,
Tobias