Title: Same Box Height
Last modified: August 31, 2016

---

# Same Box Height

 *  Resolved [robbinsgj49](https://wordpress.org/support/users/robbinsgj49/)
 * (@robbinsgj49)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/same-box-height/)
 * I selected enable box same height but how do I identify the box height? It seems
   to be random and the box goes well below my content.
 * [https://wordpress.org/plugins/colorbox-panels/](https://wordpress.org/plugins/colorbox-panels/)

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

 *  Plugin Author [wpshopmart](https://wordpress.org/support/users/wpshopmart/)
 * (@wpshopmart)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/same-box-height/#post-7090907)
 * Hello ,
 * It’s not random, actually same height js is detect a box which one has taken 
   highest content inside, then it’s figure out that box height.
 * And then finally this height is automatically added on every box.
 * Thanks
 *  [fourthelement](https://wordpress.org/support/users/fourthelement/)
 * (@fourthelement)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/same-box-height/#post-7091161)
 * If you are still having issues with same height please copy and past this amend
   into the file template > content.php and it will resolve the issue for same height
   boxes as well as with images.
 * <?php
    $post_type = “colorbox_panels”;
 *  $AllColorbox = array( ‘p’ => $WPSM_Colorbox_ID, ‘post_type’ => $post_type, ‘
   orderby’ => ‘ASC’);
    $loop = new WP_Query( $AllColorbox );
 *  while ( $loop->have_posts() ) : $loop->the_post();
    //get the post id $post_id
   = get_the_ID();
 *  $Colorbox_Settings = unserialize(get_post_meta( $post_id, ‘Colorbox_Settings’,
   true));
    if(count($Colorbox_Settings)) { $option_names = array( “colorbox_sec_title”
   => “yes”, “show_colorbox_title_icon” => “1”, “show_colorbox_title_icon_align”
   => “left”, “colorbox_radius” => “yes”, “enable_colorbox_border” => “yes”, “colorbox_shadow”
   => “yes”, “colorbox_same_height” => “no”, “colorbox_masonry” => “yes”, “box_layout”
   => 6, “colorbox_title_bg_clr” => “#e8e8e8”, “colorbox_title_icon_clr” => “#000000”,“
   colorbox_desc_bg_clr” => “#ffffff”, “colorbox_desc_font_clr” => “#000000”, “show_colorbox_desc_align”
   => “left”, “title_size” => “18”, “des_size” => “16”, “font_family” => “Arial”,“
   colorbox_styles” =>1, “custom_css” =>””, );
 *  foreach($option_names as $option_name => $default_value) {
    if(isset($Colorbox_Settings[
   $option_name])) ${“” . $option_name} = $Colorbox_Settings[$option_name]; else
   ${“” . $option_name} = $default_value; } }
 *  $colorbox_data = unserialize(get_post_meta( $post_id, ‘wpsm_colorbox_data’, 
   true));
    $TotalCount = get_post_meta( $post_id, ‘wpsm_colorbox_count’, true );
   if($TotalCount>0) { ?> <?php if($colorbox_sec_title == ‘yes’ ) { ?> <h2 style
   =”margin-bottom:20px ;display:block;width:100%;margin-top:10px”><?php echo get_the_title(
   $post_id ); ?> </h2> <?php } ?> <style> <?php require(‘style.php’); echo $custom_css;?
   > </style> <div style=”display:block;overflow:hidden;width:100%;”> <div id=”colorbox_main_container_
   <?php echo $post_id; ?>” style=”colorbox_main_container”> <?php foreach($colorbox_data
   as $colorbox_single_data) { $colorbox_image = $colorbox_single_data[‘colorbox_image’];
   $colorbox_title = $colorbox_single_data[‘colorbox_title’]; $colorbox_desc = $
   colorbox_single_data[‘colorbox_desc’]; $colorbox_title_icon = $colorbox_single_data[‘
   colorbox_title_icon’]; $enable_single_icon = $colorbox_single_data[‘enable_single_icon’];?
   > <div class=” wpsm_col-md-<?php echo $box_layout; ?> wpsm_col-sm-6 colorbox_singel_box”
   > <div class=”wpsm_panel wpsm_panel-default wpsm_panel_default_<?php echo $post_id;?
   > “> <?php if(preg_match(‘/\S+/’,$colorbox_image)) { ?> <div class=”wpsm_panel-
   body”> <?php echo do_shortcode($colorbox_image); ?> </div> <?php } ?> <?php if(
   $show_colorbox_title_icon != ‘4’ ) { ?> <div class=”wpsm_panel-heading”> <h3 
   class=”wpsm_panel-title”> <?php if($show_colorbox_title_icon == ‘1’ || $show_colorbox_title_icon
   ==3 ) { if($enable_single_icon==”yes”) { ?> <span style=”margin-right:6px;” class
   =”fa <?php echo $colorbox_title_icon; ?>”></span> <?php } } if($show_colorbox_title_icon
   == ‘1’ || $show_colorbox_title_icon==2 ) { echo $colorbox_title; } ?></h3> </
   div> <?php } ?> <?php if(preg_match(‘/\S+/’,$colorbox_desc)) { ?> <div class=”
   wpsm_panel-body”> <p><?php echo do_shortcode($colorbox_desc); ?></p> </div> <?
   php } ?> </div> </div> <?php } ?>
 *  </div>
    </div> <?php if($colorbox_masonry==”yes”) { ?> <script> jQuery(window).
   load(function(){ jQuery(‘#colorbox_main_container_<?php echo $post_id; ?>’).masonry({
   itemSelector: ‘.colorbox_singel_box’ }); }); </script> <?php } ?> <?php if($colorbox_same_height
   ==”yes”) { ?> <script> var col = new jColumn(); col.jcolumn(‘wpsm_panel_default_
   <?php echo $post_id; ?>’); </script>
 *  <!– ********************************************* this script has been added
   to sort out the problems with the same height option? –>
    <script>
 *  ;( function( $, window, document, undefined )
    { ‘use strict’;
 *  var $list = $( ‘#colorbox_main_container_<?php echo $post_id; ?>’ ),
    $items
   = $list.find( ‘.wpsm_panel’ ), setHeights = function() { $items.css( ‘height’,‘
   auto’ );
 *  var perRow = Math.floor( $list.width() / $items.width() );
    if( perRow == null
   || perRow < 2 ) return true;
 *  for( var i = 0, j = $items.length; i < j; i += perRow )
    { var maxHeight = 0,
   $row = $items.slice( i, i + perRow );
 *  $row.each( function()
    { var itemHeight = parseInt( $( this ).outerHeight() );
   if ( itemHeight > maxHeight ) maxHeight = itemHeight; }); $row.css( ‘height’,
   maxHeight ); } };
 *  setHeights();
    $( window ).on( ‘resize’, setHeights ); $list.find( ‘img’ ).on(‘
   load’, setHeights );
 *  })( jQuery, window, document );
 *  </script>
    <!– ********************************************* this script has
   been added to sort out the problems with the same height option? –> <?php } ?
   > <?php } else{ echo “<h3> No Colorbox Found </h3>”; } endwhile; ?>

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

The topic ‘Same Box Height’ is closed to new replies.

 * ![](https://ps.w.org/colorbox-panels/assets/icon-256x256.png?rev=1342171)
 * [Colorbox Panels & Info Box](https://wordpress.org/plugins/colorbox-panels/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/colorbox-panels/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/colorbox-panels/)
 * [Active Topics](https://wordpress.org/support/plugin/colorbox-panels/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/colorbox-panels/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/colorbox-panels/reviews/)

## Tags

 * [box height](https://wordpress.org/support/topic-tag/box-height/)

 * 2 replies
 * 3 participants
 * Last reply from: [fourthelement](https://wordpress.org/support/users/fourthelement/)
 * Last activity: [9 years, 9 months ago](https://wordpress.org/support/topic/same-box-height/#post-7091161)
 * Status: resolved