Support

Account

Home Forums Add-ons Repeater Field Auto Adjust Width Based on Amount of Repeats Reply To: Auto Adjust Width Based on Amount of Repeats

  • Awesome!

    This is what I came up with that worked VERY well.

    <?php if( have_rows('tabs') ): ?>
    					<?php
                        
                        // vars
                        $c = 0;
                        $class = '';
                        $linkid = get_sub_field('tab_id');
                        $background = get_sub_field('background_image');
                        $title = get_sub_field('title');
                        $description = get_sub_field('content');
                        $tabs = get_field('tabs');
    					$row_count = count($tabs);
    					
    					?>
                            <div role="tabpanel" class="tab-panels largetabs">                        
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane fade in active">            
                                                <ul class="nav nav-tabs">
    												<?php $c = 0; ?>
    													<?php while( have_rows('tabs') ): the_row(); $c++;  ?>
    														<?php if( get_row_layout() == 'image' ):    ?>                                  
                                                                <li class="<?php if($c==1) {echo "active down-arrow"; } ?>  <?php if ($row_count==1) { echo "col-sm-12"; } elseif ($row_count==2) { echo "col-sm-6"; } elseif ($row_count==3) { echo "col-sm-4"; } elseif ($row_count==4) { echo "col-sm-3"; } elseif ($row_count==6) { echo "col-sm-2"; } ?>"  style="background: url('<?php echo the_sub_field('background_image'); ?>'); background-repeat: no-repeat; background-size: cover; background-position: top center;"><a href="#<?php echo the_sub_field('tab_id');?>" data-toggle="tab"><?php the_sub_field('title'); ?></a></li>
                                                            <?php endif; ?>
                                                        <?php endwhile; ?>
                                                </ul>
    
    												<div class="tabcontent container">   
    												<?php $c = 0; ?>
    													<?php while( have_rows('tabs') ): the_row(); $c++;  ?>                                        
                                                            <div id="<?php echo the_sub_field('tab_id');?>" class="tab-pane fade in <?php if( $c == 1 ){ echo "active"; } ?>"><?php echo the_sub_field('content'); ?></div>
                                                        <?php endwhile; ?>
                                                        </div><!--end container-->    
                                    </div><!--end tabpanel tab-pane class-->
                                <?php endif; ?><!--endif tabs rows-->
                                </div><!--end tab-content-->
                            </div><!--end tab-panels.top-->
                            
                        <?php comments_template( '', true ); ?>
                        <?php if ( is_active_sidebar( 'page-widget' ) ) : ?>
                        <?php dynamic_sidebar( 'page-widget' ); ?>
                        <?php endif; ?>
                        <?php endwhile; // end of the loop. ?>