Skip Navigation

[Resolved] Content from second column being inserted at bottom of first column after view

This support ticket is created 5 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 7 replies, has 2 voices.

Last updated by joe-enteleos 5 years, 4 months ago.

Assisted by: Waqar.

Author
Posts
#1134580
B-Screenshot-top.jpg
B-Screenshot-bottom-with-code.jpg
B-Screenshot-bottom.jpg
A-Screenshot-with-code.jpg
A-Layout.jpg

This behavior happened in Elementor first. I attributed it to Elementor, then tried creating the same layout in Toolset Layouts. It involves strange behavior after inserting a content template containing a view into the first of two columns. Before inserting the content template + view, the columns lay out side by side as expected. After, the columns stack vertically, and the second column becomes horizontally constrained.

A: Behavior before inserting the content template + view. We're looking at the bottom half of the page. See images A-Layout.jpg and A-Screenshot-with-code.jpg. Two columns, the first occupying five grid spaces, the second taking the remaining seven, with the column divs showing up one right after the other, (one with class col-sm-6, the other with col-sm-7). No problem here, it lays out as expected.

B: After inserting the content template + view. Same layout with the addition of the content template + view (code below). See the B-series of screenshots. Here the entire second column div, with class col-sm-7, is inserted eight layers deep inside the div containing the first column. Inserting another content template without this view did not produce this behavior. You can see the page here: hidden link

Here is the code for the view:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<div class="container wpv-loop js-wpv-loop">
	<wpv-loop wrap="1" pad="true">
		[wpv-item index=1]
		<div>
			<div class="col-sm-12 other-states-in-group">[wpv-post-body view_template="Loop item in ST2: c(SG-xST) (PTL/FI)"]</div>
		[wpv-item index=other]
			<div class="col-sm-12 other-states-in-group">[wpv-post-body view_template="Loop item in ST2: c(SG-xST) (PTL/FI)"]</div>
		[wpv-item index=pad]
			<div class="col-sm-12 other-states-in-group"></div>
		[wpv-item index=pad-last]
			<div class="col-sm-12 other-states-in-group"></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]

CSS: 
.col-sm-12.other-states-in-group {margin-bottom: 15px;}

LOOP ITEM:
[wpv-post-featured-image]
[wpv-post-link]

What is going on here, and how do I fix it?

#1135004

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Joe,

Thank you for contacting us and I'll be happy to assist.

We've recently identified an issue in the bootstrap grid markup generated automatically, by the "Loop Editor" in the views.

Only when the number of columns is set to 1 (as in your view - <wpv-loop wrap="1" pad="true"> ), it results in a missing closing div tag, per loop item. This has been reported to the concerned team already and I'll update you as soon as there is some progress on it.

For now, you can manually update your view's content in the "Loop Editor" to:


[wpv-layout-start]
	[wpv-items-found]
		<!-- wpv-loop-start -->
		<div class="container wpv-loop js-wpv-loop">
			<wpv-loop wrap="1" pad="true">
				[wpv-item index=1]
				<div class="row">
					<div class="col-sm-12 other-states-in-group">[wpv-post-body view_template="Loop item in ST2: c(SG-xST) (PTL/FI)"]</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]

This will take care of the unclosed div tag and the page's layout will be fixed.

I hope this helps and let me know how it goes.

regards,
Waqar

#1135131

Thank you Waqar. Yes, that fixes it for now. Please keep me in the loop for when this issue is resolved.

FYI, very interesting. Setting up the same layout in Oxygen, I do not get this issue at all. The content renders as expected with the original Views code. Do you have any idea why that might be?

#1135891

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Joe,

Gald that the page's layout is fixed and I'll update you once the issue is resolved.

Since the markup of View is generated through the toolset, the issue should be reproducible with the third-party page builders like Oxygen as well (unless the layout generated through that page builder includes improperly balanced div tag(s) of its own, which balances out the difference).

A quick way to test if the page's generated source code is properly balanced or not is to use validator tool like hidden link

If you could share a link to the page, with Oxygen builder and default code in the view's loop editor, I'll be happy to look into that as well.

regards,
Waqar

#1142551

Any word on timing for the next Views update?

#1142935

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Joe,

I'm afraid, I don't have a time estimate to share at the moment, but since your last message we have posted this publically at:
https://toolset.com/errata/view-loop-output-bootstrap-grid-missing-div-and-class/

I'll keep you updated and thank you for your patience.

regards,
Waqar

#1155400

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Joe,

Thank you for waiting and just wanted to update that Toolset Views 2.7 has been released, which addresses the issue from your report.

regards,
Waqar

#1156429

Thank you for the update, Waqar!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.