Created on 11 March 2021, over 3 years ago
Updated 22 May 2024, about 1 month 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

Comments & Activities

Not all content is available!

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

  • πŸ‡¨πŸ‡¦Canada AaronChristian Kelowna, BC
  • Status changed to RTBC about 1 month 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;
              }
            }
          }
        }
      }
    }
    
Production build 0.69.0 2024