Skip Navigation

[Fermé] Loop count in view to start new row

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.

Our next available supporter will start replying to tickets in about 5.63 hours from now. Thank you for your understanding.

Marqué : 

This topic contains 3 réponses, has 2 voix.

Last updated by Luo Yang Il y a 8 années et 9 mois.

Assigned support staff: Luo Yang.



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.



Luo Yang

Languages: Anglais (English ) Chinois simplifié (简体中文 )

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;">
         <div class="item-div" style="width:33px;">....</div>
<!-- wpv-loop-end -->

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



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.




Luo Yang

Languages: Anglais (English ) Chinois simplifié (简体中文 )

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-end -->

Le sujet ‘[Fermé] Loop count in view to start new row’ est fermé à de nouvelles réponses.