[Resolved] unexpected breaklines when a viw is inserted in a template of another view

[Author]

Posts

[David Gimenez]

Hello. I will try to explain...

I have a view that shows restaurant menús. That view has some filters.

When I click in a image of any menú, it opens a modal window with info of that menu.

The loop of the view that shows menu is

<a href="#target-[wpv-post-id]" data-toggle="modal">
    [wpv-conditional if="( $(wpcf-imatge-del-menu) ne '' )"][types field='imatge-del-menu'  align="center"  ][/types][/wpv-conditional][wpv-conditional if="( $(wpcf-imatge-del-menu) eq '' )"][wpv-post-featured-image align='center' size="custom" width="1000" height="600" item="@negoci-menu.parent"][/wpv-conditional]</a>


<!-- Modal -->
<div id="target-[wpv-post-id]" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">[wpv-post-link item="@negoci-menu.parent"]</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
        
      </div>
      <div class="modal-body">
        <div><h3 class="tb-heading-david-left"><span class="no_translate">[wpv-post-title]</span></h3></div>
        <div>[wpv-conditional if="( $(wpcf-imatge-del-menu) ne '' )"][types field='imatge-del-menu'  align="center"  ][/types][/wpv-conditional][wpv-conditional if="( $(wpcf-imatge-del-menu) eq '' )"][wpv-post-featured-image align='center' size="custom" width="1000" height="600" item="@negoci-menu.parent"][/wpv-conditional]</div>
        <div><h4 class="tb-heading-david-left">[wpv-post-taxonomy type="tipologia-de-menu" format="name" separator=" - "]</h4>
        <h4 class="tb-heading-david-left"> [wpv-conditional if="( $(wpcf-vigencia-del-menu) eq '1' )"] del [types field='data-de-vigencia-del-menu' style='text' format='d/m/y' separator=', '][/types][/wpv-conditional][wpv-conditional if="( $(wpcf-vigencia-del-menu) eq '2' )"] del [types field='data-de-vigencia-del-menu' style='text' format='d/m/y' separator=', '][/types] al [types field='data-de-vigencia-final-del-menu' style='text' format='d/m/y'][/types][/wpv-conditional][wpv-conditional if="( $(wpcf-vigencia-del-menu) eq '3' )"] de [types field='data-de-vigencia-del-menu' style='text' format='F' separator=', '][/types][/wpv-conditional]</h4></div>
        <div>[wpv-view name="vista-de-seccions-de-menu-modal"]</div>
        <div class=" espaciadorBottom">&nbsp;</div>
        <div>[types field='preu-menu-complet' output='raw'][/types]€ Menú complet<br>[wpv-conditional if="( $(wpcf-hi-han-altres-preus-de-menu) eq '2' )"]
        [wpv-view name="vista-de-altres-preus-del-menu" output='raw']<br>[/wpv-conditional][wpv-conditional if="( $(wpcf-horari-del-menu) ne '' )"][types field='horari-del-menu' output='raw'][/types]<br>[/wpv-conditional][wpv-conditional if="( $(wpcf-observacions-del-menu) ne '' )"]<br><br>[types field='observacions-del-menu' ][/types]<br>[/wpv-conditional][wpv-conditional if="( $(wpcf-suplement-de-terrassa-al-menu) eq '1' )"]Suplement de Terrassa: [types field='preu-del-suplement-de-la-terrassa-del-menu' output='raw'][/types]€<br>[/wpv-conditional][wpv-conditional if="( $(wpcf-reserva-necessaria-per-menu) eq 'si' )"]Cal fer reserva prèvia<br>[/wpv-conditional][wpv-conditional if="( $(wpcf-a-on-es-serveix-el-menu) ne '' )"]El menú es serveix [types field='a-on-es-serveix-el-menu' output='raw' separator=', '][/types][/wpv-conditional]</div>
        <div>Servim aquest menú/tapa els dies [types field='dies-en-que-es-serveix-el-menu' style='text' format='d/m/y' separator=' / '][/types]</div>
        <div><h4 class="modal-title">[wpv-post-link item="@negoci-menu.parent"]</h4></div>
        <div><a href="[types field='adreca-del-negoci' item='@negoci-menu.parent' output='raw'][/types]" target="_blank" rel="noopener noreferrer">[types field='direccio' item='@negoci-menu.parent'][/types]<br>
        [types field='codi-postal' format='FIELD_VALUE' item='@negoci-menu.parent'][/types] - [wpv-post-title item="@municipi-menu.parent"]</a>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Tancar</button>
      </div>
    </div>
  </div>
</div>



<b>[wpv-post-title item="@negoci-menu.parent"]</b> - [wpv-post-title item="@municipi-menu.parent"] ([wpv-geolocation][toolset-maps-distance-value origin_source='visitor_location' postmeta='wpcf-adreca-del-menu'][/wpv-geolocation] Km)[wpv-conditional if="('[wpv-post-taxonomy type='tipologia-de-menjar' format='slug' ]' ne '' )"]<br><div class= "espaciadorBottom5"></div>[wpv-conditional if="( $(wpcf-menu-normal-vegetaria-vega) ne '' )"][types field='menu-normal-vegetaria-vega' separator=' / '][/types]<br>[/wpv-conditional]Inclou: [wpv-post-taxonomy type="tipologia-de-menjar" format="name"]<br>[types field='horari-del-menu'][/types]<span class ="no_translate">[types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="0"]<i class="fad fa-person-carry"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="1"]<i class="fad fa-shopping-bag"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="3"]<i class="fad fa-smile-beam"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="8"]<i class="fad fa-wifi"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="9"]<i class="fad fa-wind"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="10"]<i class="fad fa-umbrella-beach"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="11"]<i class="fad fa-wheelchair"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="14"]<i class="fad fa-rings-wedding"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="15"]<i class="fad fa-bullseye-arrow"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="16"]<i class="fad fa-landmark"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="17"]<i class="fad fa-city"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="18"]<i class="fad fa-water"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="19"] <i class="fad fa-mountain"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="20"]<i class="fad fa-guitar"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="21"]<i class="fad fa-parking"></i> [/types]</span>
<br><div class= "espaciadorBottom5"></div><div class= "espaciadorBottom5"></div><div class = "espaciadorBottom"></div>


[wpv-map-marker map_id='map-12' marker_id='marker-16' marker_field='wpcf-adreca-del-menu']
 <a href="#target-[wpv-post-id]" data-toggle="modal">
    [wpv-conditional if="( $(wpcf-imatge-del-menu) ne '' )"][types field='imatge-del-menu'  align='center' size='custom' width='225' height='225' resize='crop' ][/types]<br>[/wpv-conditional]
[wpv-conditional if="( $(wpcf-imatge-del-menu) eq '' )"][wpv-post-featured-image size="custom" width="225" height="150" crop="true" item='@negoci-menu.parent']<br>[/wpv-conditional]
         </a>

<div class= "espaciadorBottom5"></div>
<a href="#target-[wpv-post-id]" data-toggle="modal">
    <span class ="no_translate"><span class="textoMapa"><b>[wpv-post-title]</b><br><div class= "espaciadorBottom5"></div><span style="color:grey"><b>[wpv-post-title item="@negoci-menu.parent"]</b></span></span></span>
         </a>
<br><div class= "espaciadorBottom5"></div>
      <span class="textoMapa">[wpv-post-taxonomy type="tipologia-de-menu" format="name" separator="<br>"]: [types field='preu-menu-complet' output='raw'][/types] €
      [wpv-conditional if="('[wpv-post-taxonomy type='tipologia-de-menjar' format='slug' ]' ne '' )"]<br><div class= "espaciadorBottom5"></div>
Inclou: [wpv-post-taxonomy type="tipologia-de-menjar" format="name"]<br><div class= "espaciadorBottom5"></div>
        [/wpv-conditional]
[wpv-conditional if="('[wpv-post-taxonomy type='tipologia-de-menjar' format='slug' ]' eq '' )"]<br><div class= "espaciadorBottom5"></div>
        [/wpv-conditional]</span><span class ="no_translate"><span class="textoMapa">[wpv-post-title item="@municipi-menu.parent"]: [wpv-geolocation][toolset-maps-distance-value origin_source='visitor_location' postmeta='wpcf-adreca-del-negoci' postmeta_id='@negoci-menu.parent'][/wpv-geolocation] Km<br></span></span><div class= "espaciadorBottom5"></div>
       <span class="textoMapa"> <div class= "espaciadorBottom5"></div>
           <span class ="no_translate">[types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="0"]<i class="fad fa-person-carry"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="1"]<i class="fad fa-shopping-bag"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="3"]<i class="fad fa-smile-beam"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="8"]<i class="fad fa-wifi"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="9"]<i class="fad fa-wind"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="10"]<i class="fad fa-umbrella-beach"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="11"]<i class="fad fa-wheelchair"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="14"]<i class="fad fa-rings-wedding"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="15"]<i class="fad fa-bullseye-arrow"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="16"]<i class="fad fa-landmark"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="17"]<i class="fad fa-city"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="18"]<i class="fad fa-water"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="19"] <i class="fad fa-mountain"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="20"]<i class="fad fa-guitar"></i> [/types][types field='altres-serveis-del-negoci' item='@negoci-menu.parent' state="checked" option="21"]<i class="fad fa-parking"></i> [/types]</span><div class= "espaciadorBottom5"></div>
         <a href="#target-[wpv-post-id]" data-toggle="modal">
    Veure menú
         </a>[/wpv-map-marker]

In this template of the view (loop item) i have another view called [wpv-view name="vista-de-seccions-de-menu-modal"].

View

[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-md-12">[wpv-post-body view_template="loop-item-in-vista-de-seccions-de-menu-modal"]</div>
		</div>
		[wpv-item index=other]
			<div class="col-md-12">[wpv-post-body view_template="loop-item-in-vista-de-seccions-de-menu-modal"]</div>
		[wpv-item index=pad]
			<div class="col-md-12"></div>
		[wpv-item index=pad-last]
			<div class="col-md-12"></div>
		</div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No hi han seccions de menús[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Template

<b>[wpv-post-title]</b>
[types field='contingut-de-seccio-de-menu'][/types]
<div class ="espaciadorBottom5"></div>

This this setup I have an unexpected breakline in the view. Look at the screenshots. If I remove that view ([wpv-view name="vista-de-seccions-de-menu-modal"]) from the loop item, the is shown right.
With the view [wpv-view name="vista-de-seccions-de-menu-modal"] in the template... if I click any filter... the view is shown right.

I checked the view [wpv-view name="vista-de-seccions-de-menu-modal"] and is right, but if i ise it in the other view... it adds a breakline. I tested the view [wpv-view name="vista-de-seccions-de-menu-modal"] with bootstrap, unformated list and the problem remains..

I think that there is a problem with tags generated by the loop.

My template has the tags right.

Is there anyway to solve this?

[David Gimenez]

the breakline disapper too in the window box of marker... when a filter is clicked

[David Gimenez]

I just discovered the wahy that it works fine... however there is something that it doesn't work right.

This put a breakline in the parent view

[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-md-12">[wpv-post-body view_template="loop-item-in-vista-de-seccions-de-menu-modal"]</div>
		</div>
		[wpv-item index=other]
			<div class="col-md-12">[wpv-post-body view_template="loop-item-in-vista-de-seccions-de-menu-modal"]</div>
		[wpv-item index=pad]
			<div class="col-md-12"></div>
		[wpv-item index=pad-last]
			<div class="col-md-12"></div>
		</div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No hi han seccions de menús[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

This works right (it don't add a breakiline in the parent view)

[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-md-12"><b>[wpv-post-title]</b>
[types field='contingut-de-seccio-de-menu'][/types]
<div class ="espaciadorBottom5"></div></div>
		</div>
		[wpv-item index=other]
			<div class="col-md-12"><b>[wpv-post-title]</b>
[types field='contingut-de-seccio-de-menu'][/types]
<div class ="espaciadorBottom5"></div></div>
		[wpv-item index=pad]
			<div class="col-md-12"></div>
		[wpv-item index=pad-last]
			<div class="col-md-12"></div>
		</div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No hi han seccions de menús[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Why is this happening?

[Waqar]

Hi,

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

To troubleshoot this, I'll need to see exactly how both these views are set up in the admin area.

Can you please share temporary admin login details, along with the link to an example page, where these line breaks can be seen?

Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar]

Hi,

I'm re-opening this ticket and your next reply will be private.

Please share temporary admin login details, along with the link to an example page, where these line breaks can be seen.

regards,
Waqar

[Waqar]

Thank you for sharing the admin access details.

During troubleshooting, I noticed that due to the multi-level nesting of content templates, the content inside them is being processed more than once for the automatic formatting filters and some empty paragraph tags are being inserted. The extra vertical space or line breaks are the results of those tags.

To fix this, you can follow these steps:

1. In the view "Vista de seccions de productes del negoci qr nova", the "wpv-post-body" shortcodes are wrapped within the "wpv-autop" shortcode:

[wpv-autop][wpv-post-body view_template="loop-item-in-vista-de-seccions-de-productes-del-negoci-qr-nova"][/wpv-autop]

Please remove those [wpv-autop]...[/wpv-autop] shortcodes from around those content template shortcodes.

2. In the views "Vista de seccions de productes del negoci qr nova" and "Vista de productes per seccio del negoci", include the attribute suppress_filters="true" to all the instances of the shortcode "wpv-post-body", so that the formatting filters are not applied repeatedly:
( ref: https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-post-body )

For example:

[wpv-post-body view_template="loop-item-in-vista-de-seccions-de-productes-del-negoci-qr-nova" suppress_filters="true"]

[wpv-post-body view_template="loop-item-in-vista-de-productes-per-seccio-del-negoci" suppress_filters="true"]

I hope this helps and please let me know if you need any further assistance around this.