Problem/Motivation

We need a way to easily align content to the top, center or bottom using flexbox classes.

BLB Alignment

Steps to reproduce

n/a

Proposed resolution

Create a new section in the layout builder toolset to allow toggling between alignment.

Remaining tasks

  1. Create Plugin
  2. Create Admin UI
  3. Create Layout Builder UI

User interface changes

  1. New panel on the backend to define alignment classes.
  2. New section on the frontend to assign the classes to sections/blocks.

API changes

n/a

Data model changes

n/a

Issue fork bootstrap_layout_builder-3203096

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

AaronChristian created an issue. See original summary.

mariosr made their first commit to this issue’s fork.

mariosr opened merge request !19

emerham’s picture

emerham commented

Tested this out, and this is amazing. Nice Job!

aaronchristian’s picture

aaronchristian commented
Status: Active » Needs review
emerham’s picture

emerham commented
Status: Needs review » Reviewed & tested by the community

I have been using this patch in Production for 2 years now. No complaints or issues. I added some CSS to our theme to make blocks placed in the columns have equal height when selecting the "Stretch" option. Feel free to critique it.

// Make the columns truly "stretch" when placing blocks.
.align-items-stretch {
  &.layout-builder__layout {
    > div[class*=col] {
      display: flex;
      flex-direction: column;

      > div[class*="block-"] {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;

        > div.block__content {
          display: flex;
          flex: 1 0 auto;
          flex-direction: column;

          > div {
            flex: 1 0 auto;
          }
        }
      }
    }
  }
}
goose2000’s picture

goose2000 commented

I am new to LB, granted. I cannot see any UI where I can align how a block would align within a section (left, right center).
Do I need the "Layout Builder Blocks" module?

I saw this shown in a Vardot video - alignment of blocks inside the section.

Thanks for any pointers.

goose2000’s picture

goose2000 commented

Is this in the dev version now ?
EDIT
A: No - this is not contained in the dev version.

rajab natshah made their first commit to this issue’s fork.

emerham’s picture

emerham commented

what can we do to get these changes brought into the module? Do we need to re-edit them to clean up the MR or can these be merged in?