Tables don’t collapse

raugul

Tables don’t collapse properly when opening a tabs, spoilers or accordions on mobile, Please help me.
If I open the tabs or spoilers once, the collapse does not transfer the columns correctly, if I close the tabs or spoilers again and open them again, the table will align.
It’s all on mobile
i use default wp spoilers
After opening the tab, and scrolling a little bit of the page, the table becomes collapse
That is, with minimal scrolling of the site, the width of the open tab is recalculated
It turns out that you need to add js code to recalculate the width of the container in the tab when opening it?
Can you tell me what code to add to the plugin’s Js so that when it appears, it recalculates the width of the container?
Or to have the table automatically sort by column?
Or was the search input field activated?

https://подшипник78.рф/conicheskie/

Please help me!

kthorngren

Can't tell by looking at your source code but are you using columns.adjust() when opening a tab? See this example for more information.

Kevin

raugul

I think not, could you help me?

raugul

I use only 3 plugins
1.TablePress
2.TablePress Extension: Responsive Tables
3.Elementor (tabs)

raugul

Where can I install this js Code?

var table = $('#example').DataTable();

$('#container').css( 'display', 'block' );
table.columns.adjust().draw();

colin

This blog post here discusses WP installation - it's for both Editor and DataTables, but the principle will apply for just DataTables. Take a look at that and see if it gets you on the right path.

Colin

raugul

I don’t understand how to do this in my case?
Can you help me?

colin

What have you tried? Which part of the blog post I referenced isn't working for you?

Colin

raugul

I don't understand where to install the JS code in my case
I have already imported Tables about 50 pieces
I use the shortcode [table id=3 responsive=collapse responsive_breakpoint= "phone" /] to insert under the spoiler
When opening a spoiler or tab from a mobile device, the table does not become collapse, but if you start interacting with it, it becomes collapse

my site

https://подшипник78.рф/conicheskie/

kthorngren

When opening a spoiler or tab

Are there event handlers you can create for these? If so then in the event handler use columns.adjust(). The example I linked to uses the Bootstrap tab open event handler to run execute columns.adjust(). Sorry, I'm not familiar with the framework you are using to provide a specific answer.

Kevin

raugul

I solved the problem thank you

<script>
jQuery(function($) {
$(".elementor-tab-title").on("click", function(){
    tabTitle = $(this);
    setTimeout(reDrawAdaptiveCustom(tabTitle), 2000);
    
    
});
function reDrawAdaptiveCustom(tabTitle){
var table = tabTitle.closest('.elementor-toggle-item').find('.tablepress').DataTable();
table.columns.adjust().draw();
}
});
</script>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.