-
Posts
-
Hi, I use x-tabs though out my website for consistent look and feel. I have used Essential Grid successffully in first tab but now want t oadd additional grids (different under tabs two and three (screenshots attached) and page can be viewed here https://mysalus.org/community/stage.
As you can see from the screenshot, my issue is that the grids under number two and three tabs are not rendering correctly. If I hover over them, sometimes they will appear normally. Is there a css of child function tweak that can address this?
Thanks,
Dave
Just found this posting and the suggested css seems to work to resolve my issue.
Thanks for writing in!
Adding Ess. Grid or any other element that uses JavaScript to initialize in tabs or accordions is not a good choice as closed tabs are set to be hidden and thus any element inside it doesn’t initialize properly when the site is first loaded. Some elements like Ess. Grid has functionality to re-adjust their size when browser window is resized.
At this time, you can try adding this CSS code under Custom > CSS in the Customizer to avoid this behaviour:
.x-tab-content>.x-tab-pane:not(.active) {
height: 0 !important;
overflow: hidden;
padding: 0;
display: block;
}Thank you!
- <script> jQuery(function($){ $("#no-reply-899325 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>
