Support

Account

Home Forums Add-ons Repeater Field Using a repeater field in a table

Solved

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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.