Problem/Motivation

Selector .row > div ruining a lot of blocks

Proposed resolution

form .row>fieldset,
form .row>div {

should be wrapped in form.

This issue fixes MR !29 in ".form-row" still in use in scss

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:

Comments

super_romeo created an issue. See original summary.

super_romeo’s picture

Issue summary: View changes
super_romeo’s picture

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

fanton’s picture

Assigned: Unassigned » fanton

fanton’s picture

Assigned: fanton » Unassigned
Status: Active » Needs review

Thanks @super_romeo! I created a MR, Please review!

fanton’s picture

Priority: Normal » Major

  • hatuhay committed d04b17a8 on 5.5.x
    Issue #3332193 by fanton: Selector .row > div ruining a lot of blocks
    
hatuhay’s picture

Status: Needs review » Fixed
gillesbailleux’s picture

This issue is fixed using bootstrap_barrio 5.5.8

kenatash’s picture

Hello,

There seems to be a significant unintended consequence to this Fix. The rules in `form.css` are now applied to all forms that use bootstrap classes, including user facing ones.

The problem is, these rules now have higher specificity than the bootstrap rules for .col classes. So, any form that was using `form > .row > .col-6` in their structure are now having 'width: auto` applied at a higher specificity than `col-6` rule for `width: 50%`.

You can see how that's now an issue.

Additionally, this cannot be corrected in a subtheme without recreating all of the bootstrap grid classes at a higher specificity, which is unrealistic.

I've resorted to using `libraries-override` to remove `css/components/form.css` in the meantime, just to repair my site.

Please revert this change, or come up with a less generic rule than `form .row`.

fanton’s picture

Assigned: Unassigned » fanton
Status: Fixed » Needs work

fanton’s picture

Assigned: fanton » Unassigned
Status: Needs work » Needs review
StatusFileSize
new1.25 KB

Thanks @kenatash, I created a patch, please review

fanton’s picture

From Bootstrap 5 doc: "Dropped form-specific layout classes for our grid system. Use our grid and utilities instead of .form-group, .form-row, or .form-inline."
To reduce the padding and margin, use the Gap utility.

newaytech’s picture

Just a heads up to those using Drupal commerce - a lot of the views and cart / checkout areas are nested inside forms - so the approach here manifests into those areas. I've personally had to revert the base form.css & scss code to the previous version - just for the form wrapped directives. Using BB 5.5.8. Fantastic theme though guys - love it!

kenatash’s picture

I think this patch resolves the issue i brought up.

floydm’s picture

The patch from #15 fixes a bunch of breakage I saw in our forms after upgrading from 5.5.6 to 5.5.8. Thank you.

hatuhay’s picture

Status: Needs review » Fixed

  • hatuhay committed a9947b42 on 5.5.x authored by fanton
    Issue #3332193 by fanton, hatuhay: Selector .row > div ruining a lot of...
newaytech’s picture

Thanks for the re-roll - working well for me.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.