Comments

knalstaaf created an issue. See original summary.

knalstaaf’s picture

In this code it's solely done with col-sm-x classes. Probably better practice, makes the CSS selector obsolete:

bootstrap-6-6-stacked.tpl.php

<?php if ($left || $right): ?>
    <div class="row">
    <?php if ($left): ?>
      <<?php print $left_wrapper; ?> class="<?php if (empty($right)): ?>col-sm-12 <?php else: ?>col-sm-6 <?php endif; ?><?php print $left_classes; ?>">
        <?php print $left; ?>
      </<?php print $left_wrapper; ?>>
    <?php endif; ?>
    <?php if ($right): ?>
      <<?php print $right_wrapper; ?> class="<?php if (empty($left)): ?>col-sm-12 <?php else: ?>col-sm-6 <?php endif; ?><?php print $right_classes; ?>">
        <?php print $right; ?>
      </<?php print $right_wrapper; ?>>
    </div>
    <?php endif; ?>
<?php endif; ?>

bootstrap-4-4-4-stacked.tpl.php

<?php if ($left || $central || $right): ?>
    <div class="row">
      <<?php print $left_wrapper; ?> class="<?php if ((empty($central) && (empty($right)))): ?>col-sm-12 stretched <?php elseif ((empty($central) || (empty($right)))): ?>col-sm-6 half <?php else: ?>col-sm-4 cut <?php endif; ?><?php print $left_classes; ?>">
        <?php print $left; ?>
      </<?php print $left_wrapper; ?>>
      <<?php print $central_wrapper; ?> class="<?php if ((empty($left) && (empty($right)))): ?>col-sm-12 stretched <?php elseif ((empty($left) || (empty($right)))): ?>col-sm-6 half <?php else: ?>col-sm-4 cut <?php endif; ?><?php print $central_classes; ?>">
        <?php print $central; ?>
      </<?php print $central_wrapper; ?>>
      <<?php print $right_wrapper; ?> class="<?php if ((empty($left) && (empty($central)))): ?>col-sm-12 stretched <?php elseif ((empty($left) || (empty($central)))): ?>col-sm-6 half <?php else: ?>col-sm-4 cut <?php endif; ?><?php print $right_classes; ?>">
        <?php print $right; ?>
      </<?php print $right_wrapper; ?>>
    </div>
<?php endif; ?>
ser’s picture

Issue summary: View changes

Hi, it's a really good idea.

Do you think it could be improved to detect that the one of columns has much smaller height and the other one would stretch to 100% when the other one is finished?

knalstaaf’s picture

I'm not sure if I understand your question right. Do you mean equal heights?

onejam’s picture

Will this be like using the default layout 'Fluid two columns'? so that if a column has empty fields, the other column will stretch to fill it?

knalstaaf’s picture

@duvien: exactly.