Support

Account

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

Helping

Using a repeater field in a table

    • mrtoad

    • July 22, 2021 at 5:38 am

    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.

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 Cookie Policy. If you continue to use this site, you consent to our use of cookies.