Problem/Motivation

CSS rules not applied to form button => button misaligned

Steps to reproduce

Drupal 9 with Bootstrap Barrio 5.5.6

Proposed resolution

replace ".form-row" with "row" in scss/components/form.scss file

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#16 add-form-wrapper-3311048-16.patch914 bytesfanton
#2 remove-form-row-from-scss-3311048-2.patch458 bytesshyam_bhatt

Issue fork bootstrap_barrio-3311048

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:

About issue forks

Comments

thhomas created an issue. See original summary.

shyam_bhatt’s picture

shyam_bhatt
he/him
commented
Status: Needs work » Needs review
StatusFileSize
new remove-form-row-from-scss-3311048-2.patch458 bytes

Please check the patch. ".form-row" replaced with "row" in scss/components/form.scss file.

miyuki’s picture

miyuki
Location Toronto, ON
commented

FYI, the patch successfully makes changes to scss/components/form.scss, but not css/components/form.css.

  • hatuhay committed 957ff67 on 5.5.x 
    Issue #3311048 by Shyam_Bhatt: .form-row still in use in scss
hatuhay’s picture

hatuhay commented
Status: Needs review » Fixed
jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented
Status: Fixed » Needs work

This approach breaks a lot of other things, because the selector .row > div affects almost everything in a BS layout. Example: it overwrites padding, flex and width definitions for all sidebars that have a class like e.g. col-md-4

jurgenhaas opened merge request !29

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented
Version: 5.5.6 » 5.5.x-dev
Status: Needs work » Needs review

The attached MR makes sure, that those selectors only work inside of forms, not globally.

shyam_bhatt’s picture

shyam_bhatt
he/him
commented
Status: Needs review » Reviewed & tested by the community

@jurgenhaas yes adding a form wrapper will be more accurate. "MR !29" looks fine to me.

form {
  .row>fieldset,
  .row>div {
    padding-right: 5px;
    padding-left: 5px;
    flex: 0 1 auto;
    width: auto;
    max-width: none;
  }
crutch’s picture

crutch commented

not using scss, getting error with this patch. Trying to resolve #6

Error: Call to a member function addClass() on array in bootstrap_barrio_preprocess_input() (line 736 of themes\contrib\bootstrap_barrio\bootstrap_barrio.theme).

manually changing form.css line 18 and 19 to

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

fixes the issue with no errors.

shyam_bhatt’s picture

shyam_bhatt
he/him
commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

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

super_romeo’s picture

super_romeo commented
Related issues: +#3332193: Selector .row > div ruining a lot of blocks
super_romeo’s picture

super_romeo commented

Problem persist in new release. Please see related issue.

fanton’s picture

fanton
he/him
Primary language Spanish
Location Uruguay
commented
Assigned: Unassigned » fanton
Priority: Normal » Major
fanton’s picture

fanton
he/him
Primary language Spanish
Location Uruguay
commented
Assigned: fanton » Unassigned
StatusFileSize
new add-form-wrapper-3311048-16.patch914 bytes

Please check the patch. I wrapped ".row" with "form" in scss/components/from.scss file.

hatuhay closed merge request !29