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
| Comment | File | Size | Author |
|---|---|---|---|
| #15 | remove-selector-form-row-3332193-15.patch | 1.25 KB | fanton |
Issue fork bootstrap_barrio-3332193
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:
- fanton-5.x-patch-47549
changes, plain diff MR !38
- 3332193-selector-.row-
compare
- 5.5.x
changes, plain diff MR !39
Comments
Comment #2
super_romeo commentedComment #3
super_romeo commentedComment #5
fantonComment #7
fantonThanks @super_romeo! I created a MR, Please review!
Comment #8
fantonComment #10
hatuhay commentedComment #11
gillesbailleuxThis issue is fixed using bootstrap_barrio 5.5.8
Comment #12
kenatash commentedHello,
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`.
Comment #13
fantonComment #15
fantonThanks @kenatash, I created a patch, please review
Comment #16
fantonFrom 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.
Comment #17
newaytech commentedJust 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!
Comment #18
kenatash commentedI think this patch resolves the issue i brought up.
Comment #19
floydm commentedThe 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.
Comment #20
hatuhay commentedComment #22
newaytech commentedThanks for the re-roll - working well for me.