Incorrect display pdopage - Load by button

Good time of day. I can’t understand what kind of jamb, tell me what to do for correct display.
code template

[[$heado]]
<body>
<!-- Container -->
	<div id="container">
		<!-- Header
		    ================================================== -->
[[$headero]]
		<!-- End Header -->

		<!-- switcher-box -->
 [[$switcher-box]]
		<!-- end switcher-box -->

		<!-- content 
			================================================== -->
		<div id="content">

			<!-- page-banner-section 
				================================================== -->
			<section class="page-banner-section">
				<div class="container-fluid">
						<h1>[[*pagetitle]]</h1>
					[[pdoCrumbs?
    &tpl=`@INLINE <li><a href="[[+link]]">[[+menutitle]]</a></li>`]]
				</div>
			</section>
			<!-- End page-banner section -->

			<!-- portfolio-section 
				================================================== -->
			<section class="portfolio-section">
				<div class="container-fluid">
					<div class="portfolio-box iso-call colum-3 no-space">

<div id="pdopage">
  [[!+page.nav]]
  <div class="rows">
    [[!pdoPage?
      &parents=`[[*id]]`
      &ajaxMode=`button`
      &tpl=`tvo`
  &includeTVs=`img,podrazdeleniya,janr`
  &limit=`6`
    ]]
  </div>
</div>
					</div>

					<div class="center-button">
						<a class="btn-default btn-dark load-post-container" 
							data-load="container/load-container3.html"  
							data-number="3" 
							href="#">
							<i class="la la-refresh"></i>
							View More
						</a>
					</div>

				</div>
			</section>
			<!-- End portfolio section -->

		</div>
		<!-- End content -->
[[$shopping-popup]]
		<!-- fixed-sidebar-right -->
 [[$fixed-sidebar]]
	</div>
	<!-- End Container -->
[[$jso]]
</body>
</html>

chunk

<div class="item project-post"> <div class="project-gal"> <img src="[[+tv.img:PhpThumbOn=w=360&h=283&zc=1]]" alt="[[+pagetitle]]" title="[[+pagetitle]]"> <div class="hover-text showen-text"> <p>[[+tv.podrazdeleniya]], [[+tv.janr]]</p> <h2><a href="[[+uri]]" title="[[+pagetitle]]">[[+pagetitle]]</a></h2> </div> </div> </div>

If you use the call - pdoResources - then everything is ok

[[pdoResources?
&parents=[[*id]]
&tpl=tvo
&includeTVs=img,podrazdeleniya,janr
&limit=6
]]

What exactly do you mean by “incorrect display”?

What is not displayed correctly? The first page from pdoPage? Or when you try to load more data?

Hi,

I think you should use

[[!pdoPage?
    **&element=`pdoResources`**
    &parents=`[[*id]]`
    &tpl=`tvo`
    &includeTVs=`img,podrazdeleniya,janr`
    &processTVs=`1`
    &limit=`6`
    ]]

Good evening. For some reason, the image in the previous post did not load. Resources are displayed incorrectly. They go vertically …

Hello.
put it on .

		<div class="portfolio-box iso-call colum-3 no-space">

<div id="pdopage">
  [[!+page.nav]]
  <div class="rows">
    [[!pdoPage?
    &element=`pdoResources`
      &parents=`[[*id]]`
      &ajaxMode=`button`
      &tpl=`tvo`
  &includeTVs=`img,podrazdeleniya,janr`
  &limit=`6`
    ]]
  </div>
</div>
					</div>

The display is still incorrect.


And it should be like this

	<div class="portfolio-box iso-call colum-3 no-space">

[[pdoResources?
  &parents=`[[*id]]`
  &tpl=`tvo`
  &includeTVs=`img,podrazdeleniya,janr`
  &limit=`6`
]]
					</div>

Please compare the HTML markup that gets generated by MODX between the version that works (with “pdoResources”) and the one that doesn’t work (using “pdoPage”).

What is the difference?
Just from your printscreens, there is no way to tell.

pdoResources

<div class="portfolio-box iso-call colum-3 no-space">

<div class="item project-post">
							<div class="project-gal">
								<img src="/assets/cache_image/noimage_360x283_a4c.jpg" alt="Танцевальный коллектив  «Стайл»" title="Танцевальный коллектив  «Стайл»">
								<div class="hover-text showen-text">
									<p>
Александровский СДК, Хореография</p>
									<h2><a href="ovation/lyubitelskie-tvorcheskie-obedineniya/tanczevalnyij-kollektiv-stajl.html" title="Танцевальный коллектив  «Стайл»">Танцевальный коллектив  «Стайл»</a></h2>
								</div>
							</div>
						</div>
<div class="item project-post">
							<div class="project-gal">
								<img src="/assets/cache_image/noimage_360x283_a4c.jpg" alt="Вокальная группа «Селяночка»" title="Вокальная группа «Селяночка»">
								<div class="hover-text showen-text">
									<p>
Новоандреевский СДК, 
Вокал</p>
									<h2><a href="ovation/lyubitelskie-tvorcheskie-obedineniya/vokalnaya-gruppa-selyanochka.html" title="Вокальная группа «Селяночка»">Вокальная группа «Селяночка»</a></h2>
								</div>
							</div>
						</div>
<div class="item project-post">
							<div class="project-gal">
								<img src="/assets/cache_image/noimage_360x283_a4c.jpg" alt="Вокальная группа «Землячки»" title="Вокальная группа «Землячки»">
								<div class="hover-text showen-text">
									<p>
Никулинский СДК, 
Вокал</p>
									<h2><a href="ovation/lyubitelskie-tvorcheskie-obedineniya/vokalnaya-gruppa-zemlyachki.html" title="Вокальная группа «Землячки»">Вокальная группа «Землячки»</a></h2>
								</div>
							</div>
						</div>
<div class="item project-post">
							<div class="project-gal">
								<img src="/assets/cache_image/noimage_360x283_a4c.jpg" alt="Дуэт «Грация»" title="Дуэт «Грация»">
								<div class="hover-text showen-text">
									<p>
Лопазновский СДК, 
Вокал</p>
									<h2><a href="ovation/lyubitelskie-tvorcheskie-obedineniya/duet-gracziya.html" title="Дуэт «Грация»">Дуэт «Грация»</a></h2>
								</div>
							</div>
						</div>
<div class="item project-post">
							<div class="project-gal">
								<img src="/assets/cache_image/noimage_360x283_a4c.jpg" alt="Танцевальный коллектив «Нью Пипл»" title="Танцевальный коллектив «Нью Пипл»">
								<div class="hover-text showen-text">
									<p>
Лопазновский СДК, Хореография</p>
									<h2><a href="ovation/lyubitelskie-tvorcheskie-obedineniya/tanczevalnyij-kollektiv-«nyu-pipl».html" title="Танцевальный коллектив «Нью Пипл»">Танцевальный коллектив «Нью Пипл»</a></h2>
								</div>
							</div>
						</div>
<div class="item project-post">
							<div class="project-gal">
								<img src="/assets/cache_image/noimage_360x283_a4c.jpg" alt="Фольклорный коллектив «Горсточка»" title="Фольклорный коллектив «Горсточка»">
								<div class="hover-text showen-text">
									<p>
Лопазновский СДК, 
Фольклор</p>
									<h2><a href="ovation/lyubitelskie-tvorcheskie-obedineniya/folklornyij-kollektiv-gorstochka.html" title="Фольклорный коллектив «Горсточка»">Фольклорный коллектив «Горсточка»</a></h2>
								</div>
							</div>
						</div>

pdoPage

<div class="portfolio-box iso-call colum-3 no-space">
<div id="pdopage">
  <ul class="pagination"><li class="page-item disabled"><a class="page-link" href="#">Первая</a></li><li class="page-item disabled"><a class="page-link" href="#">&laquo;</a></li><li class="page-item active"><a class="page-link" href="ovation/lyubitelskie-tvorcheskie-obedineniya/?page=1">1</a></li><li class="page-item"><a class="page-link" href="ovation/lyubitelskie-tvorcheskie-obedineniya/?page=2">2</a></li><li class="page-item"><a class="page-link" href="ovation/lyubitelskie-tvorcheskie-obedineniya/?page=3">3</a></li><li class="page-item"><a class="page-link" href="ovation/lyubitelskie-tvorcheskie-obedineniya/?page=2">&raquo;</a></li><li class="page-item"><a class="page-link" href="ovation/lyubitelskie-tvorcheskie-obedineniya/?page=3">Последняя</a></li></ul>
  <div class="rows">
    <div class="item project-post">
							<div class="project-gal">
								<img src="/assets/cache_image/noimage_360x283_a4c.jpg" alt="Танцевальный коллектив  «Стайл»" title="Танцевальный коллектив  «Стайл»">
								<div class="hover-text showen-text">
									<p>
Александровский СДК, Хореография</p>
									<h2><a href="ovation/lyubitelskie-tvorcheskie-obedineniya/tanczevalnyij-kollektiv-stajl.html" title="Танцевальный коллектив  «Стайл»">Танцевальный коллектив  «Стайл»</a></h2>
								</div>
							</div>
						</div>
<div class="item project-post">
							<div class="project-gal">
								<img src="/assets/cache_image/noimage_360x283_a4c.jpg" alt="Вокальная группа «Селяночка»" title="Вокальная группа «Селяночка»">
								<div class="hover-text showen-text">
									<p>
Новоандреевский СДК, 
Вокал</p>
									<h2><a href="ovation/lyubitelskie-tvorcheskie-obedineniya/vokalnaya-gruppa-selyanochka.html" title="Вокальная группа «Селяночка»">Вокальная группа «Селяночка»</a></h2>
								</div>
							</div>
						</div>
<div class="item project-post">
							<div class="project-gal">
								<img src="/assets/cache_image/noimage_360x283_a4c.jpg" alt="Вокальная группа «Землячки»" title="Вокальная группа «Землячки»">
								<div class="hover-text showen-text">
									<p>
Никулинский СДК, 
Вокал</p>
									<h2><a href="ovation/lyubitelskie-tvorcheskie-obedineniya/vokalnaya-gruppa-zemlyachki.html" title="Вокальная группа «Землячки»">Вокальная группа «Землячки»</a></h2>
								</div>
							</div>
						</div>
<div class="item project-post">
							<div class="project-gal">
								<img src="/assets/cache_image/noimage_360x283_a4c.jpg" alt="Дуэт «Грация»" title="Дуэт «Грация»">
								<div class="hover-text showen-text">
									<p>
Лопазновский СДК, 
Вокал</p>
									<h2><a href="ovation/lyubitelskie-tvorcheskie-obedineniya/duet-gracziya.html" title="Дуэт «Грация»">Дуэт «Грация»</a></h2>
								</div>
							</div>
						</div>
<div class="item project-post">
							<div class="project-gal">
								<img src="/assets/cache_image/noimage_360x283_a4c.jpg" alt="Танцевальный коллектив «Нью Пипл»" title="Танцевальный коллектив «Нью Пипл»">
								<div class="hover-text showen-text">
									<p>
Лопазновский СДК, Хореография</p>
									<h2><a href="ovation/lyubitelskie-tvorcheskie-obedineniya/tanczevalnyij-kollektiv-«nyu-pipl».html" title="Танцевальный коллектив «Нью Пипл»">Танцевальный коллектив «Нью Пипл»</a></h2>
								</div>
							</div>
						</div>
<div class="item project-post">
							<div class="project-gal">
								<img src="/assets/cache_image/noimage_360x283_a4c.jpg" alt="Фольклорный коллектив «Горсточка»" title="Фольклорный коллектив «Горсточка»">
								<div class="hover-text showen-text">
									<p>
Лопазновский СДК, 
Фольклор</p>
									<h2><a href="ovation/lyubitelskie-tvorcheskie-obedineniya/folklornyij-kollektiv-gorstochka.html" title="Фольклорный коллектив «Горсточка»">Фольклорный коллектив «Горсточка»</a></h2>
								</div>
							</div>
						</div>
  </div>
</div>

So the difference in the HTML codes you posted is, that in the version from “pdoPage” the posts are wrapped in 2 additional <div> tags.

<div id="pdopage">
	<ul class="pagination">...</ul>
	<div class="rows">
		<!-- the posts -->
	</div>
</div>

I suppose the class colum-3 therefore doesn’t work anymore for the posts.


Try a solution without additional <div> tags. Maybe something like this works:

<section class="portfolio-section">
<div id="pdopage" class="container-fluid">
	[[!+page.nav]]
	<div class="portfolio-box iso-call colum-3 no-space rows">
		[[!pdoPage? ... ]]
	</div>
</div>
</section>

Hi.Thank you. Almost everything is ok. Loading

	<section class="portfolio-section">
<div id="pdopage" class="container-fluid">
	[[!+page.nav]]
	<div class="portfolio-box iso-call colum-3 no-space rows">
		[[!pdoPage?
    &element=`pdoResources`
      &parents=`[[*id]]`
      &ajaxMode=`button`
      &tpl=`tvo`
 &includeTVs=`img,podrazdeleniya,janr`
  &limit=`6`
]]
	</div>
</div>
</section>

Video DropMeFiles – free one-click file sharing service