Hi Mohamed,
This is how the
UIkit's Dynamic Grid component works.
It initializes on certain events like page load, browser re-size, etc.
The "Gallery" particle (UIkit's Dynamic Grid) does not get initialized in the inactive Tabs because they are not considered as part of the DOM until they got active.
All you need to do is to manually initialize the grid on a certain event. In your case, the event will be when the tab gets clicked.
Here's what you need to do:
1. Add the following JS code under the "Page Settings" tab in the
Base outline:
(function($) {
$(document).ready(function() {
$(".sprocket-tabs .sprocket-tabs-inner").on("click", function(){
function gridAfterFilter() {
$('[data-uk-grid]').trigger('display.uk.check');
}
setTimeout(gridAfterFilter, 200);
});
});
})(jQuery);
2. Clear Joomla cache and refresh.
Have a look at
this video (watch it in Fullscreen and FullHD for better quality). It shows everything that I explained above