Skip Navigation

[Resolved] end of table or div without the beginning

This support ticket is created 6 years 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
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 2 replies, has 2 voices.

Last updated by bryan 6 years ago.

Assisted by: Nigel.

Author
Posts
#1183071

If I use either a grid or table grid I see this unmatched end of table or end of div generated by the loop wizard.

It's not clear to me if this is causing some unexpected formatting errors where I include a view within a page with other elements; but I suspect so. In any case the toolset views editor marks it in red as an error so I decided to report it. I think it's a bug which has been there for a long time like the empty class which was being generated by the loop wizard and was recently fixed. <div class=" ">

I was thinking this might be due to my using bootstrap 4 but recently I found its happening even on the discover-wp.com and is there even on old views which were probably generated years ago.

see line 15

cheers

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop wrap="1" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-sm-12">[wpv-post-body view_template="loop-item-in-test-view"]</div>
		</div>
		[wpv-item index=other]
			<div class="col-sm-12">[wpv-post-body view_template="loop-item-in-test-view"]</div>
		[wpv-item index=pad]
			<div class="col-sm-12"></div>
		[wpv-item index=pad-last]
			<div class="col-sm-12"></div>
		</div>
	</wpv-loop>
	<!-- 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]

or line 24 & 26

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<table width="100%" class="wpv-loop js-wpv-loop">
	<wpv-loop wrap="2" pad="true">
		[wpv-item index=1]
		<tr>
			<td>
				[wpv-post-body view_template="loop-item-in-test-view3"]
			</td>
		[wpv-item index=other]
			<td>
				[wpv-post-body view_template="loop-item-in-test-view3"]
			</td>
		[wpv-item index=2]
			<td>
				[wpv-post-body view_template="loop-item-in-test-view3"]
			</td>
		</tr>
		[wpv-item index=pad]
			<td></td>
		[wpv-item index=pad-last]
			<td></td>
		</tr>
	</wpv-loop>
	</table>
	<!-- 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]
#1183482

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Bryan

The extra closing div looks out of place, but it exists for a reason that is not apparent if you insert a one-column Bootstrap grid (your first example), but would be if you inserted, for example, a four-column grid.

First, let's review just the loop section of your first example:

<wpv-loop wrap="1" pad="true">
    [wpv-item index=1]
    <div class="row ">
        <div class="col-sm-12">the content template</div>
    </div>
    [wpv-item index=other]
        <div class="col-sm-12">the content template</div>
    [wpv-item index=pad]
        <div class="col-sm-12"></div>
    [wpv-item index=pad-last]
        <div class="col-sm-12"></div>
    </div><!-- hanging closing div -->
</wpv-loop>

See that I added an HTML comment to that seemingly errant closing div tag. If you visit a page with this View and inspect the DOM, you won't find that closing div tag, it doesn't get added to the page at all.

Why?

Well, wrap="1" means this is a one-column View, so the indices used by wpv-item will effectively be resetting after every one post.

So the wpv-item index=1 block will get output for every post, the wpv-item index=other, index="pad", and index="pad-last" blocks will never get output, meaning that final closing div tag will never be output. (I assume these alternative blocks are added even though they will never be used in a one-column grid because of the mechanics of how this section is generated.)

Now, let's use an example with a four-column grid.

<wpv-loop wrap="4" pad="true">
    [wpv-item index=1]
    <div class="row ">
        <div class="col-sm-3">[wpv-post-body view_template="loop-item-in-projects-excluding-a-role"]</div>
    [wpv-item index=other]
        <div class="col-sm-3">[wpv-post-body view_template="loop-item-in-projects-excluding-a-role"]</div>
    [wpv-item index=4]
        <div class="col-sm-3">[wpv-post-body view_template="loop-item-in-projects-excluding-a-role"]</div>
    </div><!-- hanging closing div -->
    [wpv-item index=pad]
        <div class="col-sm-3"></div>
    [wpv-item index=pad-last]
        <div class="col-sm-3"></div>
    </div><!-- hanging closing div -->
</wpv-loop>

Look closely and you will see that the wpv-item index=1 block opens the .row div, but this time doesn't close it, somewhere else will have to close it.

As this is a four-column grid it will need to be closed after every 4th item, and sure enough the index=4 block contains a hanging closing div tag.

And if the last row doesn't have 4 items, the index=pad-last block will supply the closing div tag.

So, although it looks like there is a hanging closing div tag, it only actually gets added to the markup where it is needed.

#1184202

I get it but it's counter intuitive and irritating to have to ignore the html syntax highlighting error that inevitably results. ...not that I have a better idea, thanks for the substantial explanation.