Hi!
I got 5 different diagrams (Data Tables plugin) that the user preferably should be able to flip between. I don’t want all 5 diagrams to show at the same time. Classic tabs would be great. The problem is that only the first open tab loads the diagram correctly fullwidth. The closed tabs make the diagram too small.
Is there a way to work around this problem?
If not, could you think of a different solution to show only one diagram at a time?
<3
Hi @Lobsterass,
Thank you for writing in, please define a width to your diagrams, so it will not depend on the width of the tab.
If that does not work, please provide us the direct page URL where we can see the diagrams.
Thanks,
Hi!
To make these responsive table diagrams non-responsive is not a good idea. I tried just to see how it would work and it’s terrible as it cuts off information on smaller screens. Also, it didn’t change the way tabs loaded them.
Hi @Lobsterass,
Theme Options > CSS:
.supsystic-table-diagram {
width: 100% !important;
max-width: 100% !important;
}
Theme Options > JS:
jQuery(document).ready(function($) {
$(".x-nav-tabs-item a").on('click', function(event) {
$(window).trigger('resize');
});
});
Hope it helps 
Hi!
Thanx! It almost works. User has to double click new tabs in order for the diagram to load fullwidth inside. Do you think it’s fixable? Would be wonderful if it could work!
<3
Hi @Lobsterass,
Maybe we could add some timing, example, please change the above code to this
jQuery(document).ready(function($) {
$(".x-nav-tabs-item a").on('click', function(event) {
setTimeout ( function() {
$(window).trigger('resize');
}, 1000 );
});
});
Hope this helps.
Hola @Rad!
You’re creative 
! That works but it’s ugly to see the small diagram for one second before it transforms to fullwidth. I shortened the trigger time to 0 but the transformation is still visible.
Is it possible to hide the initial small diagram with code somehow? It would be more OK for the content of the tab to initially look emtpy for a second while the fullwidth diagram loads.
<3
Hello @Lobsterass,
Regretfully you cannot make the tab initially empty because as soon as the tab pane gets displayed, the plugin immediately calculates and displays the diagram. Even adding this custom css does not work:
.x-tab-pane .supsystic-table-diagram {
visibility: hidden;
opacity: 0;
transition: all 5s ease;
}
.x-tab-pane.active .supsystic-table-diagram {
visibility: visible;
opacity: 1;
transition: all 5s ease;
}
I would recommend that you contact the creators of the plugin and ask for some advice how to prevent or add a delay in displaying the diagram.
Thank you for your understanding.
Hi @RueNel!
The plugin support had this to say:
It is important to understand. This is not a plugin issue. This is the problem of displaying your theme tabs. Accordingly, the theme developer or your administrator should help you. We are ready to study the problem and your topic - but only as a custom work.
For such cases, we also created a general article that should help your developer with this problem.
Best regards,
https://supsystic.com
Ole
Could you please tell me how I implement this within Pro? Where do I put what?
<3
Hello @Lobsterass,
Yes we know that this isn’t a plugin issue. This isn’t a theme issue as well. As I have mentioned in my previous reply, as soon as the tab pane gets displayed, the plugin immediately calculates and displays the diagram. You cannot hide the diagram if the container is hidden or displayed as none.
If you want to implement the given code in the provided url in Pro, you will have to insert the whole code in a content area element and it should be displayed in the page.
Hope this helps.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.