Created on 11 March 2021, almost 4 years ago
Updated 15 September 2024, 3 months ago

Problem/Motivation

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

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

๐Ÿ› Bug report
Status

RTBC

Version

2.0

Component

Code

Created by

๐Ÿ‡จ๐Ÿ‡ฆCanada AaronChristian Kelowna, BC

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Merge request !19Resolve #3203096 "Column alignment" โ†’ (Open) created by mariosr
  • ๐Ÿ‡จ๐Ÿ‡ฆCanada AaronChristian Kelowna, BC
  • Status changed to RTBC 7 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States emerham

    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;
              }
            }
          }
        }
      }
    }
    
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States goose2000

    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.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States goose2000

    Is this in the dev version now ?

  • ๐Ÿ‡ฏ๐Ÿ‡ดJordan Rajab Natshah Jordan

    rajab natshah โ†’ made their first commit to this issueโ€™s fork.

Production build 0.71.5 2024