1

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

Fluid two column stacked

5
  • Sounds like a CSS issue. Look here for guidance. Make two parallel <div> colums the same height Aug 20, 2014 at 5:46
  • I don't think it is only CSS issue. I don't want the right column to "grow up" when there is more content than height of the picture. Maybe there is some possibility to add more link in the right column when a content is higher than height of the picture
    – kristina
    Aug 20, 2014 at 6:04
  • It is a CSS problem fore sure because nothing more than CSS defines the height on the browser display. Display suite is just a serverside module Aug 20, 2014 at 6:10
  • I can use overflow: auto on the right column with specific height of the picture from the left. After that I will have scrollbar, but maybe someone has another idea how to make it better.
    – kristina
    Aug 20, 2014 at 6:17
  • A javascript solution will work also. Whenever the left columns scales, get its height, then set right column to same height. Aug 20, 2014 at 6:46

2 Answers 2

0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.