Issue when adding container layout using bootstrap5 grid - Issue Active in Version 9.12

[btugwell]

Affected Version of Concrete CMS

9.x

Description

Am running into the same issue as described here: #10407

Issue is present in version 9.1.2 and is making using Layouts impossible.

Environment information:

Concrete Version

Core Version - 9.1.2
Version Installed - 9.1.2
Database Version - 20220908074900

Hostname

ds1665.tmddedicated.com

Environment

production

Database Information

Version: 10.3.36-MariaDB
SQL Mode:

Concrete Packages

Cycle2 Slide Show (1.1), Modena Theme (2.0.4)

Concrete Overrides

None

Concrete Cache Settings

Block Cache - Off
Overrides Cache - Off
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

Server Software

Apache

Server API

cgi-fcgi

PHP Version

7.4.30

PHP Extensions

bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dba, dom, enchant, exif, fileinfo, filter, ftp, gd, gettext, gmp, hash, iconv, imap, intl, json, ldap, libxml, mbstring, mysqli, mysqlnd, odbc, openssl, pcntl, pcre, PDO, pdo_mysql, PDO_ODBC, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, pspell, readline, Reflection, session, shmop, SimpleXML, snmp, soap, sockets, SPL, sqlite3, standard, sysvmsg, sysvsem, sysvshm, tidy, tokenizer, xml, xmlreader, xmlrpc, xmlwriter, xsl, zip, zlib

PHP Settings

max_execution_time - 300
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 600
max_input_vars - 1000
memory_limit - 2048M
post_max_size - 512M
upload_max_filesize - 512M
ldap.max_links - Unlimited
mbstring.regex_retry_limit - 1000000
mbstring.regex_stack_limit - 100000
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
odbc.max_links - Unlimited
odbc.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - no value
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5
unserialize_max_depth - 4096

How to reproduce

Issue comes up when adding a layout of 2 or more columns.

Add 2 or more columns,
adjust column widths.

Possible Solution

None found.

Additional Context

Using Modena Theme but found issue in Default theme as well.

[VidalThemes]

I can see from the console that Concrete is adding a push class to the central column as soon as the central left column handle is altered.

[aembler]

This is using a custom Grid framework, not the Bootstrap 5 grid layout. It's possible that there's some quirk of the grid framework engine here but this is not something related to the core.

[aembler]

I'm not familiar with the "ensemble" grid framework - you're likely going to have to help us get this fixed over in the layouts.js include in the bedrock repo, @VidalThemes I suspect something about the grid framework implementation is reporting the wrong width when the handles are dragged, and that's causing an extra offset or something?

[btugwell]

I was able to reproduce the issue using the. Concrete5 default theme as well. Bryce Tugwell The University of Wyoming Biodiversity Institute Phone: 307.766.6280 Cell: 703.622.5989 Fax: (877) 309-6285

…

________________________________ From: Andrew Embler ***@***.***> Sent: Wednesday, October 5, 2022 12:15:03 PM To: concretecms/concretecms ***@***.***> Cc: Bryce Russell Tugwell ***@***.***>; Author ***@***.***> Subject: Re: [concretecms/concretecms] Issue when adding container layout using bootstrap5 grid - Issue Active in Version 9.12 (Issue #10954) ◆ This message was sent from a non-UWYO address. Please exercise caution when clicking links or opening attachments from external sources. This is using a custom Grid framework, not the Bootstrap 5 grid layout. It's possible that there's some quirk of the grid framework engine here but this is not something related to the core. — Reply to this email directly, view it on GitHub<#10954 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A3I7EQN2BMF2FDRUFMEDYV3WBXASPANCNFSM6AAAAAAQV5AVKE>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[aembler]

Ah, I see. It had been fixed in Atomik but not Elemental.

I see what's going on here. We introduced a fix for this into Bedrock, for themes built on Bedrock. This makes sense - because themes can have different classes for their grid frameworks. However, the same fix for Bedrock themes will also fix non-Bedrock themes like Elemental, if they use Bootstrap-derived grid frameworks.

So what I'm going to do is move this CSS that fixes the issue into the layouts css included when the layouts toolbar is displayed. It'll only fix the issue for Bootstrap grid frameworks. If your "Ensemble" grid framework doesn't use Bootstrap you'll have to ship your own fix within your CSS file. This will fix the issue for Elemental.

This has been included and will be released in 9.2.0. In the meantime you can apply this SASS directly to Modena (or your site) to fix the issue. Here's the relevant CSS.

div#ccm-theme-grid-temp div.row,
div#ccm-theme-grid-edit-mode-row-wrapper div.row {
    position: relative;
}

Obviously, if your grid framework does not use the row class you'll have to substitute whatever you do use, or figure out an alternate fix.