Problem with equal height of columns in Display Suite

Question

I`ve got Fluid two column stacked layout in Display Suite. There is responsive picture in the first column, the second column contain some rendered fields. Below that columns is long text. My problem is with right column. I need to make the height of that column equal to height of the picture on left side. How to achieve that? Is there possibility to add some scrollbar in the right column? Anybody had the similiar situation? Some simple solution without coding or only small snippet ;) Maybe I need to add some view in the right column

Answer 1

Create your own layout for display suite and use CSS.

Add the folder 'ds_layouts' to you theme folder root. Under that folder ad another folder: two_col_fluid_stacked_fixed_height

Ie Must look like this: YOURTHEMEFOLDER -> ds_layouts -> two_col_fluid_stacked_fixed_height

Add the following files to two_col_fluid_stacked_fixed_height folder:

two_col_fluid_stacked_fixed_height.inc

<?php
function ds_two_col_fluid_stacked_fixed_height() {
    return array(
        'label' => t('two col stacked fluid fixed height'),
        'regions' => array(
            'header' => t('Header'),
            'left' => t('Left'),
            'right' => t('Right'),
            'footer' => t('Footer'),
        ),
        'css' => TRUE,
    );
}

two-col-fluid-stacked-fixed-height.tpl.php

<<?php print $layout_wrapper; print $layout_attributes; ?> class="<?php print $classes;?> ds-2col-stacked-fluid-fixed-height clearfix">
  <!-- Needed to activate contextual links -->
  <?php if (isset($title_suffix['contextual_links'])): ?>
    <?php print render($title_suffix['contextual_links']); ?>
  <?php endif; ?>

    <<?php print $header_wrapper; ?> class="group-header<?php print $header_classes; ?>">
      <?php print $header; ?>
    </<?php print $header_wrapper; ?>>

    <div class="center-wrapper">

    <<?php print $left_wrapper; ?> class="group-left<?php print $left_classes; ?>">
      <?php print $left; ?>
    </<?php print $left_wrapper; ?>>

    <<?php print $right_wrapper; ?> class="group-right<?php print $right_classes; ?>">
      <?php print $right; ?>
    </<?php print $right_wrapper; ?>>
    </div>

    <<?php print $footer_wrapper; ?> class="group-footer<?php print $footer_classes; ?>">
      <?php print $footer; ?>
    </<?php print $footer_wrapper; ?>>

</<?php print $layout_wrapper ?>>

<!-- Needed to activate display suite support on forms -->
<?php if (!empty($drupal_render_children)): ?>
  <?php print $drupal_render_children ?>
<?php endif; ?>

two_col_fluid_stacked_fixed_height.css

.ds-2col-stacked-fluid-fixed-height > .group-header {
}

.ds-2col-stacked-fluid-fixed-height .center-wrapper > .group-left {
    float: left; /* LTR */
    width: 50%;
}

.ds-2col-stacked-fluid-fixed-height .center-wrapper > .group-right {
    width: 50%;
    height:99999px;
    position:absolute;
    right:0;
}

.ds-2col-stacked-fluid-fixed-height .center-wrapper {
    overflow:hidden;
    position:relative;
}

.ds-2col-stacked-fluid-fixed-height.group-one-column > .group-left,
.ds-2col-stacked-fluid-fixed-height.group-one-column > .group-right {
    width: 100%;
    float: none;
}

.ds-2col-stacked-fluid-fixed-height > .group-footer {
    clear: both;
}

/*delete this*/
.group-left {
    background:yellow;
}
.group-right {
    background:red;
}

Clear you cache and use this layout in display suite. Tweak CSS to your liking.

Answer 2

I use Omega 3.0 for prettymuch everything and it comes with the Equal-Heights-Library option installed (toggled on the theme settings page). I've never tried to implement equal heights on another theme, but I'm sure someone could answer that here.

When using Omega with equal heights option enabled, and Display Suite with a multiple column layout, you can add the 'equal-height-container' class to the layout wrapper, and 'equal-height-column' class to the layout's groups (group-left/group-right in your case), via the 'Custom Classes' tab at the bottom of the content-type's Display Settings page.

It works flawlessly.

Aside from that... the hack & slash would be to use The One True Layout method, which is what I tend to use when options are slim... though it messes with your styling a bit.