View last page breaks

This support ticket is created 3 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
-	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 1 reply, has 2 voices.

Last updated by Waqar 3 years ago.

Assisted by: Waqar.

Author

Posts

December 20, 2021 at 3:45 am #2248475

randallH-3

Screen Shot 2021-12-20 at 11.43.32 AM.png

Screen Shot 2021-12-20 at 11.43.28 AM.png

Hi,

The last page of the view breaks. We need it to be same width even if the items are less than 4.

[wpv-layout-start]
	[wpv-items-found]
<ul class="pagination">
	<li class="page-item">[wpv-pager-prev-page force="true"][wpml-string context="wpv-views"]<img src="<em><u>hidden link</u></em>" style="height:50px;"/>[/wpml-string][/wpv-pager-prev-page]</li>
	<!-- wpv-loop-start -->
	<wpv-loop wrap="4" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-md-3 div-gt-navi">
				[types field="gt-name"][/types]
			</div>
		[wpv-item index=other]
			<div class="col-md-3 div-gt-navi">
				[types field="gt-name"][/types]
			</div>
		[wpv-item index=4]
			<div class="col-md-3 div-gt-navi1">
				[types field="gt-name"][/types]
			</div>
		</div>
		[wpv-item index=pad]
			<div class="col-md-3"></div>
		[wpv-item index=pad-last]
			<div class="col-md-3"></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]
	<li class="page-item">[wpv-pager-next-page force="true"][wpml-string context="wpv-views"]<img src="<em><u>hidden link</u></em>" style="height:50px;" />[/wpml-string][/wpv-pager-next-page]</li>
</ul>
[wpv-layout-end]

.pagination{border-top:0px;}
.div-gt-navi{border-right:1px solid gray;     
  -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -ms-grid;
    display: grid;
    height: 100%;
    justify-items: center; text-align:center; font-size:15px;}


.div-gt-navi1{  -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -ms-grid;
    display: grid;
    height: 100%;
    justify-items: center; text-align:center; font-size:15px;}

December 20, 2021 at 3:55 pm #2248921

Waqar

Hi,

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

Looking into the code from the view's loop editor, I noticed that the classes "div-gt-navi" and "div-gt-navi1" are not included with the padded index items for the "pad" and "pad-last" items, respectively:


[wpv-item index=pad]
    <div class="col-md-3"></div>
[wpv-item index=pad-last]
    <div class="col-md-3"></div>

For consistency in the styles/layout, they should be included for the padded items too, like this:


[wpv-item index=pad]
    <div class="col-md-3 div-gt-navi"></div>
[wpv-item index=pad-last]
    <div class="col-md-3 div-gt-navi1"></div>

In case the layout issue still persists, you're welcome to share the link to the page where this view can be seen.

regards,
Waqar