[Resolved] View not outputting correctly

[Author]

Posts

[SimonP3753]

Link to a page where the issue can be seen: hidden link

This page was working well but something has happened, best illustrated in the screenshots.

I've tried deleting the view and page the view is displayed on and recreating. Using different names for the view and page.

One strange thing is the issue is different in different browsers.

Also the padding on the actual list isn't in line with the COMPOSERS heading. I've tried inspecting the code but I can't find where the padding is coming from.

Thanks for the help again.

Regards

Simon

[Nigel]

Hi Simon

It seems like something went wrong trying to create a chat, let me follow-up.

I logged in to your site and saw an issue on that page, more obvious in Firefox than in Chrome.

I also notice that your plugins are a few versions out of date. I can see in the markup a missing row class which was recently fixed, could you please update plugins and test again?

(You might want to make sure you have a current backup first.)

[SimonP3753]

Hi Nigel

Updated WP, all plugins and Divi theme. I'm afraid the issues remain.

Thanks

Simon

[Nigel]

Hi Simon

OK, thanks, well at least you are up to date.

I spotted the empty class in the HTML output and guessed it was the reported issue, but looking at the View I see that you add the row with an empty class yourself.

See the screenshot where you can see an ever-nesting series of divs that contain the composer links.

Here is your Loop Output section:

[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=" ">
			<div class="col-sm-12">[wpv-post-body view_template="Loop item in all-composers"]</div>
		[wpv-item index=other]
			<div class="col-sm-12">[wpv-post-body view_template="Loop item in all-composers"]</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>
	</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]

I'm not sure what you are trying to achieve here, but you are leaving a trail of divs (with class=" ") that are not being closed.

If all you are doing is outputting the taxonomy name as a link, I suggest you delete all of the above and replace it with

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<div class="container wpv-loop js-wpv-loop">
	<wpv-loop>
		[wpv-taxonomy-link]
	</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]

[SimonP3753]

Hi Nigel

The links need to be one per line, not flowing like screenshot, please can you advise me how to do this?

As you can tell I'm not a coder....

Does the other screenshot relate to the row class? It's greyed out, I can't select or unselect.

Many thanks

Simon

[Nigel]

The simplest solution is to just add paragraph tags around the link, so that each will display on a new line, i.e. change this part:

    <wpv-loop>
        <p>[wpv-taxonomy-link]</p>
    </wpv-loop>

[SimonP3753]

Thank you Nigel, looks great apart from one little thing on Firefox (Chrome is perfect).

Please see the screenshot - there is a vertical line running through the composer names, any ideas?

Thanks

Simon

[Nigel]

It seems to come from the Divi stylesheet, with this selector:

#main-content .container::before

In your Loop Output section you were adding a container div (with class of "container"), and I'm not sure why.

I don't think you need it, meaning you can get rid of the div altogether, or just remove the container class, e.g.

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start -->
    <wpv-loop>
        <p>[wpv-taxonomy-link]</p>
    </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]

[SimonP3753]

My issue is resolved now. Thank you!