I am having some odd issues with content I have in accordions, tabbed content blocks or the new tour content feature in WPBakery Visual Composer (I have updated to the newest version 4.7). They seem to be a bit buggy. They work most of the time, but the main issues I’m having are that when I switch from a small amount of content to something longer it overflows outside the div instead of expanding the height of the div it’s in. However, if I resize my screen just a bit then it snaps to the right size. This happens on the page below with the tour content under “Understanding Employee Benefits” (second bullet) and the accordion content to the right of “Optimizing Executive Benefits” (next to last accordion when opened pushes last one out of sight). This should work correctly without having to resize the screen. Any help would be much appreciated!
Sorry for the late reply.
Please update Visual Composer to the latest version 4.7.1 as it has some row related issues fixed. However, it is set up now. I added this code:
I ended up changing the code just a bit. This will help for now, but my main concern is since it’s a responsive site giving the divs a fixed height creates a lot of open space when you switch from content that is really long to much shorter content. Ideally, I would like it to resize to however long the content is…just not sure what is keeping it from doing so. I seems to work fine on mobile, but not desktop.
The row has a fixed height and relative width, which you can change by selecting the row type, In Container; Full Width Background..etc. Since your text was too long, it exceeded the row height and lead to it’s misbehavior.
However, that does not mean it would not be still responsive. If you have any issue with the responsive mode, let us know so we can provide the correct code to fix it.
I’m still having this issue with our website. I’ve already updated to the newest version of Specular and installed the newest version of Visual Composer hoping it would fix the issue, but it has not. I did narrow it down to being an issue with having the row set to “Full Width Content”. If I have it set to “Container” the accordions behave as they should (expanding the div’s height on open). In “Full Width Content” mode it breaks and the height stays fixed, causing the accordion content to flow outside the row. I’m still not sure why this happens or why the code is setting a fixed height. Setting the row to “Container” or “Full Width Background” isn’t an option due to the design layout. The oddest part to me is that if you resize the window even a bit then the height auto-corrects…something is just buggy but I can’t figure out what is causing it. I don’t want to assign a height to the row because that just causes awkward spaces for shorter content…some of the accordion content is much longer than others. Any help on this would be much appreciated. Thanks!
