Fix for Having Multi-Column Post Sliders in Elementor Tabs


You may notice that when you insert "Posts" widgets into 2 or more tabs from the "Elementor Tabs" widget, and you give the "Posts" widgets multiple columns, only the first tab will show with your columns. When you go to your next tab, it won't show the columns you specified, only 1 column will show.

The reason why this is happening is that javascript is only loading for the initial tab and not the other tab(s). The javascript code is creating a mathematical calculation to distribute your posts evenly for the columns and it's basing it off the area it's in. The quick fix for this is to change the size of the browser window, then it'll reset the javascript to show the columns. But no one is going to adjust the size of their browser window to make columns appear.

The fix for this is to trick the tabs into resizing themselves when clicked on, that way the javascript can determine the area it needs to load the columns. Below is the CSS code you'll need to add to your site. You will need to modify the code though based on the number of tabs you have. The example code has 4 tabs. Also, to keep things clean, you will need to assign an ID to your Elementor Tabs widget (i.e. #slider-tab-fix):

/* Fix for Sliders in Tabs */

#slider-tab-fix .elementor-tab-content {
display: block;
visibility: hidden !important;
height: 0 !important;
padding: 0px;

}

#slider-tab-fix .elementor-tab-content.elementor-active[data-tab="1"],
#slider-tab-fix .elementor-tab-content.elementor-active[data-tab="2"],
#slider-tab-fix .elementor-tab-content.elementor-active[data-tab="3"],
#slider-tab-fix .elementor-tab-content.elementor-active[data-tab="4"] {
visibility: visible !important;
height: auto !important;
}

/* End of Fix for Sliders in Tabs */

Please note that will only work for the basic "Elementor Tabs" and not "Advanced Tabs".

Did you find this article useful?