Skip Navigation

[Geschlossen] Loop count in view to start new row

This support ticket is created vor 9 Jahre, 5 Monate. 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.

This topic contains 3 Antworten, has 2 Stimmen.

Last updated by Luo Yang vor 9 Jahre, 5 Monate.

Assigned support staff: Luo Yang.

Author
Artikel
#79144

Hi,

I am trying to create a grid view using CSS (ie not tables as per the grid layout Views uses).

I need to wrap every 3 elements in a div to create a row.

Is there a way to do this using views? Similar to a loop counter so if loop counter hits 3 start a new row.

Cheers!

#79484

Luo Yang
Supporter

Languages: Englisch (English ) Vereinfachtes Chinesisch (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Hi Joff,

I suggest you try wrap all result in a outer DIV, set fixed width of it, wrap each item in a div, set fixed width 1/3 of outer DIV. for example:

<!-- wpv-loop-start -->
<div class="outer-div" style="width:100px;">
      <wpv-loop>
         <div class="item-div" style="width:33px;">....</div>
      </wpv-loop>
</div>
<!-- wpv-loop-end -->

Please let me know if you need assist to do it.

Regards
Luo

#79529

Hi Louy,

I have already applied this approach but then had to also add some JavaScript to equalise the column heights.

I was hoping the grid layout for Views might have a responsive div layout on the roadmap rather than using a table based approach.

Cheers

Joff

#79838

Luo Yang
Supporter

Languages: Englisch (English ) Vereinfachtes Chinesisch (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Please try this:

<!-- wpv-loop-start -->
      <wpv-loop wrap="3" pad="true">
         [wpv-item index=1]
            <div class="my-row">[wpv-post-link]
         [wpv-item index=other][wpv-post-link]
         [wpv-item index=3][wpv-post-link]</div>
         [wpv-item index=pad]
         [wpv-item index=pad-last]</div>
      </wpv-loop>
<!-- wpv-loop-end -->

Das Thema „[Geschlossen] Loop count in view to start new row“ ist für neue Antworten geschlossen.