Content displays incorrectly when hiding other sections

[justinlosh]

I am trying to make a single page layout in the Pro theme. I made each section the full height of the browser viewport and centered the content of each section vertically. Everything looks great so far, but when I try to hide sections that aren’t active, that’s when I run into problems. Stuff starts disappearing. For example, in my products section I have a headline, a paragraph of text, and a grid from The Grid extension. The grid disappears completely but everything else in that section displays correctly. Another example: in the services section there are three cards in a 3 column classic block grid. The background of the card doesnt stretch all the way to the bottom. Again, these problems dont occur until I hide the sections that aren’t active. If I were to view them all in a linear fashion by scrolling down, they would appear fine. This really has me scratching my head. Any help would be appreciated.

.x-site {
  overflow: auto;
}
.x-container.offset {
  margin: 0;
}
.x-container.max {
  max-width: unset !important;
}
.entry-wrap {
  width: 100%;
  min-height: 100vh;
  padding: 0;
} 
.entry-content {
  margin-top: 0;
  min-height: 100vh;
}
.entry-title {
  display: none;
}
.x-section {
  padding: 0 !important;
}
.cs-content .x-section .x-container {
  min-height: 100vh;
  width: 50%;
  display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	align-content: center !important;
}
.x-section .x-bg {
  position: absolute;
  top: unset;
  bottom: 0 !important;
}
.x-section .x-bg-layer-lower-image, .x-bg-layer-upper-image {
  background-size: 100% auto !important;
}
.x-section .x-bg-layer-lower-image {
  background-position: bottom !important;
}
.x-section .x-bg-layer-upper-image {
  background-position: top !important;
}
.x-recent-posts a {
  background: #01223d;
  border-radius: 15px;
  padding: 12px;
}
.x-recent-posts-img {
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}
.x-recent-posts-img:after {
  background-color: #000 !important;
}
h3.h-recent-posts {
  color: #fff !important;
}
.x-recent-posts-date {
  color: #29abe2 !important;
}
#wpcf7-f155-p35-o1 > form > p:nth-child(6) {
  text-align: center;
}
.wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-textarea {
  background: none !important;
  border-width: 0px 0px 2px 0px !important;
  border-bottom: 2px solid rgb(1, 34, 61);
  box-shadow: unset;
  color: #fff !important;
}
.tg-grid-wrapper {
  text-align: center;
}
.x-section {
  display: none !important;
}
.x-section.active {
	display: block !important;
}

Here’s what the page looks like when I dont hide all of the inactive sections:

Screenshot

Here’s what it looks like when I do hide the inactive sections:

Screenshot

What am I doing wrong?

Update: I’ve found that if click the restore down button in the browser and then maximize again, the content displays correctly. Is there anything I can do to fix this?

[deeprootsmarketing]

Any chance you can use Loom to create a video showing the issue in action? Thanks!

[justinlosh]

I actually managed to fix the problem. I can’t believe I hadn’t thought of it before.

The Problem
The grids used in the Pro theme evidently dont work well when placed in containers that are hidden. Elements such as The Grid, Essential Grid, and even the Classic Block grid use Javascript to determine the dimensions of their grids. If their containers are hidden, I dont think they have any dimensions applied to them when using functions such as getHeight().

The Solution
Load your tabs/sections as visible in the source.Once your page loads, use JS to hide all of the inactive tabs/sections on your page. This way, the dimensions of the grids can be calculated before the containers are hidden.

I had spent days trying to solve this issue. I believe this information would be useful to any developer that wants to have grids inside of tabs or hidden sections. Any support rep that sees this should…

A) Consider using this method as the default for the way the X/Pro themes work
B) Put this information into a knowledge base or FAQ so other developers can find it easily
C) Use this information when any developer that has this problem makes a post about it on these forums.
I spent days trying to solve this issue.