Home › Forums › Add-ons › Repeater Field › Using a repeater field in a table
As the title suggests, I am using a repeater field in a table. I would like to use a table to easily achieve equal height columns (not equal width)
I can get it to work perfectly for 3 wide columns with two spacer columns (with dividers) in the middle – so 5 columns.
The code is this:
<div class="staff-block-row">
<?php
// Check rows exists.
if( have_rows('staff_profile') ):
// Loop through rows.
while( have_rows('staff_profile') ) : the_row(); ?>
<div class="profile-wrapper">
<?php $image = get_sub_field('staff_image'); ?>
<div class="profile-picture">
<?php echo wp_get_attachment_image( $image['id'], 'full' ); ?>
</div>
<div class="white-topper"></div>
<div class="profile-header">
<h4><?php the_sub_field( 'staff_name' ); ?></h4>
<?php if( get_sub_field('staff_position') ): ?>
<?php the_field('staff_position'); ?>
<?php endif; ?>
</div>
<div class="profile-text">
<?php the_sub_field( 'staff_text' ); ?>
</div>
</div>
<div class="yacht-spacer">
<div class="vertical-line"></div>
</div>
<?php
// End loop.
endwhile;
// No value.
else :
// Do something...
endif; ?>
</div>
</section>
My CSS is
.staff-block-row {
display: table-row;
}
.profile-wrapper {
display: table-cell;
vertical-align: top;
width: 500px;
background-color: #f0f0f0;
}
.yacht-spacer {
width: 50px;
display: table-cell;
position: relative;
}
.vertical-line {
width: 1.3px;
height: 100%;
position: absolute;
background-color: rgba(28,34,64,.3);
margin-left: 49%;
}
.latest-yacht-wrapper {
display: table-cell;
}
.yacht-spacer:last-child {
display: none;
}
.vertical-line {
width: 1.3px;
height: 100%;
background-color: rgba(28,34,64,.3);
}
Sorry for all the code
The problem is, as soon as a client adds more rows, they just keep squishing on to the same row, and eventually become skinny impractical columns.
Is there a way to say, after 3 repeaters, begin a new row?
I feel like this must be a common requirement as it’s the 2nd time I have run into this but I can’t find any documentation on it and despite my best efforts and a question on stack overflow (even with a bounty) has got me no answers.
Any help would be greatly appreciated.
The need for this is why I use bootstrap.
These types of things can also be achieved using flexbox if you don’t want to use bootstrap https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.