Support

Account

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

Solved

Auto Adjust Width Based on Amount of Repeats

  • On this page you can see that there are only three tabs. Usually there is four, but I need to know how I can automatically adjust the width of the tabs based upon the amount of tabs created.

    If this is more of a PHP question, then please let me know and I’ll move to research an alternative method.

    What I’m looking for is this:

    If there are two tabs, then class=”col-sm-6″
    If there are three tabs, then class=”col-sm-4″
    If there are four tabs, then class=”col-sm-3″

    and so on.

    My code:

    				<?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');
                        ?>
                            <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"; } ?>  col-sm-3"  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-->
  • There are several ways to get the number of rows

    
    // using get_post_meta
    $row_count = intval(get_post_meta($post->ID, 'tabs', true));
    
    
    // using get_field
    $tabs = get_field('tabs');
    $row_count = count($tabs);
    
  • 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. ?>
        
    
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.