Tables don’t collapse

Tables don’t collapse

raugulraugul Posts: 7Questions: 0Answers: 0

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!

Replies

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • raugulraugul Posts: 7Questions: 0Answers: 0

    I think not, could you help me?

  • raugulraugul Posts: 7Questions: 0Answers: 0

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

  • raugulraugul Posts: 7Questions: 0Answers: 0

    Where can I install this js Code?

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

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • raugulraugul Posts: 7Questions: 0Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • raugulraugul Posts: 7Questions: 0Answers: 0

    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/

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • raugulraugul Posts: 7Questions: 0Answers: 0
    edited April 2021

    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.

This discussion has been closed.