[Resolved] Views in Beaver Builder tabs do not include the correct results

[Author]

Posts

[michaelM-28]

I am trying to create a Content Template for a custom post type Tours. In this Content Template, I am using Beaver Builder. In Beaver Builder, I am using a "Tabs" module that I would like to insert my Views into. I would like 1 View per tab. When I am in editing/preview layout mode in Beaver Builder, my Views show up fine. But when I publish my changes and view a tour using the content template, only one of my views shows properly with the other one outputting "No items found" on the frontend. I am totally confused as to why this is happening.

The Views that I am using do not use Beaver Builder in the content template, just HTML. I just can't figure out why they would show up fine in the editor but not in the frontend?

Link to a page where the issue can be seen: hidden link
This is a password-protected site under development:
user: demo
pass: 5c1c7ebf7e21

I have attached screenshots of what I'm seeing in the editor mode vs. live frontend

Is there a reason I can't use multiple views in the same content template?

[Christian Cox]

Hi, it's perfectly normal to include multiple Views in a single Content Template, so something else must be going on. Please try the following troubleshooting steps first:
- Copy all the Views shortcodes and paste outside the tabs so they are all visible on page load. Check to be sure they are functioning properly.
- Temporarily deactivate all plugins except Types, Views, WooCommerce and Beaver Builder Pro. Check to see if the Views work correctly in tabs now.
- Take screenshots showing the View editor screen for all the Views you want to display in tabs. Include those in your next reply.

Let me know what you discover.

[michaelM-28]

I tried all of the steps you suggested and I am still unable to display all of the views together on a page, even without tabs. I also noticed that specifically when I add the taxonomy view "Tour Leaders" it causes a lot of styling issues inside Beaver Builder. I have screenshots of the views attached. One of the views (Tour Itinerary) had too much code to capture in the screenshot, so here is the code for that view:

LOOP OUTPUT EDITOR:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
<div class="tour-itinerary" id="tour-itinerary">	
	<wpv-loop>
      [wpv-item index=1]
      		<div class="tour-itinerary__item panel">
      			<div class="tour-itinerary__headline collapsed clearfix" data-toggle="collapse" data-target="#collapse-[wpv-post-id]" data-parent="#tour-itinerary" role="button" aria-expanded="false">
        			<div class="tour-itinerary__headline__image lazy" style="display: block; background-image: url([types field='destination-image' output='raw'][/types]);">
                  	</div>
        			<ul class="tour-itinerary__headline__date">
            			<li class="tour-itinerary__headline__date">[types field='date'][/types]</li>
        			</ul>
        			<ul class="tour-itinerary__headline__short__description">
            			<li class="tour-itinerary__headline__short__description">
            			[types field='short-description'][/types]
            			</li>
        			</ul>
        			<div class="tour-itinerary__headline__expand">
            			<span class="btn-more"><span>More</span> <i class="fa fa-angle-down"></i></span>
            			<span class="btn-less"><span>Close</span> <i class="fa fa-angle-up"></i></span>
        			</div>
     			</div>
   				<div class="tour-itinerary__description collapse clearfix" id="collapse-[wpv-post-id]" role="tabpanel" aria-expanded="false" style="height: 0px;">
        			<div class="tour-itinerary__description__text">
        			[types field='long-description'][/types]
        			</div>
        			<p class="tour-itinerary__meals">
        				<i class="fa fa-cutlery meals"></i> [types field='meals-included' separator=', '][/types]
        			</p>
   				</div>
		</div>
     [wpv-item index=other]
  			<div class="tour-itinerary__item panel">
      			<div class="tour-itinerary__headline collapsed clearfix" data-toggle="collapse" data-target="#collapse-[wpv-post-id]" data-parent="#tour-itinerary" role="button" aria-expanded="false">
        			<div class="tour-itinerary__headline__image lazy" style="display: block; background-image: url([types field='destination-image' output='raw'][/types]);">
                  	</div>
        			<ul class="tour-itinerary__headline__date">
            			<li class="tour-itinerary__headline__date">[types field='date'][/types]</li>
        			</ul>
        			<ul class="tour-itinerary__headline__short__description">
            			<li class="tour-itinerary__headline__short__description">
            			[types field='short-description'][/types]
            			</li>
        			</ul>
        			<div class="tour-itinerary__headline__expand">
            			<span class="btn-more"><span>More</span> <i class="fa fa-angle-down"></i></span>
            			<span class="btn-less"><span>Close</span> <i class="fa fa-angle-up"></i></span>
        			</div>
     			</div>
   				<div class="tour-itinerary__description collapse clearfix" id="collapse-[wpv-post-id]" role="tabpanel" aria-expanded="false" style="height: 0px;">
        			<div class="tour-itinerary__description__text">
        			[types field='long-description'][/types]
        			</div>
        			<p class="tour-itinerary__meals">
        				<i class="fa fa-cutlery meals"></i> [types field='meals-included' separator=', '][/types]
        			</p>
   				</div>
		</div>
	</wpv-loop>
</div>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

LOOP OUTPUT EDITOR CSS:

.tour-itinerary {
    border: 1px solid #e8e8e8;
  	width: 50%;
  	margin: 0 auto;
}

.tour-itinerary__item:not(:last-child) {
    border-bottom: 1px solid #e8e8e8;
}
@media screen and (min-width: 768px)
.tour-itinerary__item {
    position: relative;
}

.tour-itinerary__item {
    min-height: 80px;
}

.tour-itinerary__headline.collapsed {
    transition: all .3s ease;
}
.tour-itinerary__item [data-toggle=collapse] {
    cursor: pointer;
}
@media screen and (min-width: 768px)
.tour-itinerary__headline {
    position: static;
}

.tour-itinerary__headline {
    line-height: 1.3;
    min-height: 80px;
    padding: 18px 103px 18px 148px;
    position: relative;
}

.clearfix:before {
      content: " ";
    display: table;
}

@media screen and (min-width: 768px)
.tour-itinerary__headline__image {
    transition: all 0.35s ease;
}

.tour-itinerary__headline__image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(100% - 3px);
    left: 3px;
    position: absolute;
    top: 3px;
    width: 135px;
}

@media screen and (min-width: 768px)
.tour-itinerary__headline__date {
    padding-right: 10px;
}
@media screen and (min-width: 768px)
.tour-itinerary__headline__date{
    float: left;
    width: 50%;
}

@media screen and (min-width: 768px)
.tour-itinerary__headline__date {
    font-size: 18px;
}

.tour-itinerary__headline__date {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

@media screen and (min-width: 768px)
.tour-itinerary__headline__short__description {
    padding-left: 10px;
}

li {
    list-style: none;
}

.tour-itinerary__headline__expand {
    font-size: 14px;
    position: absolute;
    right: 10px;
    top: 15px;
}

.clearfix:after {
  clear:both;
  content: " ";
    display: table;
}

.tour-itinerary__headline.collapsed .btn-less {
    display: none;
}

.tour-itinerary__headline:not(.collapsed) .btn-more {
    display: none;
}

.tour-itinerary__description__text {
  margin: 20px 10px;
}

.tour-itinerary__meals {
  margin: 15px 10px;
}

@media screen and (min-width: 768px)
.tour-itinerary__headline[aria-expanded="true"] {
    padding-left: calc(43% + 25px);
}

.meals {
  padding-right: 10px;
  color: #ffa500;
}

.panel {margin-bottom: 0px;}

@media screen and (min-width: 768px)
.tour-itinerary__headline:not(.collapse) .tour-itinerary__headline__image {
    width: 43.15%;
}



@media screen and (min-width: 768px)
.tour-itinerary__headline[aria-expanded="true"] .tour-itinerary__headline__date, .tour-itinerary__headline[aria-expanded="true"] .tour-itinerary__headline__short__description {
    float: none;
    padding: 0px;
}

.collapse.in {
    display: block;
}

@media screen and (min-width: 768px)
.tour-itinerary__description {
    padding-left: calc(43% + 25px);
}

.tour-itinerary__description {
    padding: 15px;
}

[Christian Cox]

Okay I don't see anything obviously wrong here, so let's try a few more things:
- Uncheck "don't include the current page in query result" in the overview View and itinerary View. Sometimes this checkbox can cause unexpected problems.
- In the Itinerary View, change the Query Filter to be "posts that are children of the post where this View is shown" instead of the current post in the loop.

If neither of these steps seems to resolve the issue, I need to take a closer look. I can install the Duplicator plugin and create a clone of your site so I can run some additional tests locally and monitor code execution. Let me know if you approve.

[michaelM-28]

Awesome, that worked! Now the only issue I'm seeing is that when I include a taxonomy view (not a post view) into one of the tabs, it instantly messes up the styling. Is that not something I can do (mix taxonomy views & post views on the same page?). I tried different query filters and checking/unchecking boxes to no avail in the taxonomy view "Tour Leaders." I've attached a screenshot of what the taxonomy view does to the page.

[Christian Cox]

You can mix these Views, that shouldn't be a problem. It looks like a CSS clash where some styles are causing unexpected problems. If I can see it in the browser I can make a recommendation. Is this happening in a particular browser?

[michaelM-28]

So I figured it out, the issue only happened when I used a loop item content template in the view. When I added the code to the Loop Output Editor, it worked fine and didn't create any weird styling issues. So for anyone that might possibly be experiencing this, just make sure to not use the Loop Item Content Template and it should be fine.