This can be seen at http://dev.demo-olivero.local/form/example-accessibility-labels

Problem/Motivation

If we don't set a legend (#title) for a fieldset, there is no padding for this element

With a legend:
fieldset with a legend
Without a legend:
fieldset without legend

Steps to reproduce

Display a fieldset without legend

Proposed resolution

As the problem is coming from the .fieldset__legend--visible class which is only there when a legend exist, my proposal is to remove this class in the css rules to apply the padding for all fieldset.

In css/components/fieldset.pcss.css, change this

.fieldset__legend--visible ~ .fieldset__wrapper {
  margin-block-start: 0;
  padding-block: var(--sp);
  padding-inline-start: var(--sp);
  padding-inline-end: var(--sp);
}

into this:

.fieldset__wrapper {
  margin-block-start: 0;
  padding-block: var(--sp);
  padding-inline-start: var(--sp);
  padding-inline-end: var(--sp);
}

Let me know what you think

CommentFileSizeAuthor
#26 Screenshot 2022-12-27 at 12.19.43 PM.png191.63 KBandy-blum
#26 Screenshot 2022-12-27 at 12.20.04 PM.png181.68 KBandy-blum
#25 3195828-25.patch1.12 KBameymudras
#23 interdiff_3195828_15-20.txt1.12 KB_pratik_
#23 3195828-22.patch1.32 KB_pratik_
#15 3195828-15.patch1.32 KBcindytwilliams
#11 3195828-after.png72.88 KBAbhijith S
#11 3195828-before.png86.61 KBAbhijith S
#10 Afetr-Patch-Without-legend.png33.76 KBdjsagar
#10 After-Patch-With-legend.png40.22 KBdjsagar
#9 Screenshot 2021-02-12 at 17.00.10.png25.05 KBlauriii
#8 HQz3cOe - Imgur.png32.74 KBilgnerfagundes
#6 3195828-6.patch1.48 KBGauravvvv
#5 3195828-5.patch514 bytesGauravvvv
#2 3195828-2.patch516 bytesGauravvvv
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

DuneBL created an issue. See original summary.

Gauravvvv’s picture

Gauravvvv CreditAttribution: Gauravvvv at OpenSense Labs commented
FileSize
3195828-2.patch516 bytes

I have provided the patch with the possible solution you suggested, please review.

Gauravvvv’s picture

Gauravvvv CreditAttribution: Gauravvvv at OpenSense Labs commented
Status: Active » Needs review
DuneBL’s picture

DuneBL
Primary language French
CreditAttribution: DuneBL commented

Many thanks, looks good to me
But I don't know why the the failed...

Gauravvvv’s picture

Gauravvvv CreditAttribution: Gauravvvv at OpenSense Labs commented
FileSize
3195828-5.patch514 bytes

Removed a white empty line, let's hope if it works.

Gauravvvv’s picture

Gauravvvv CreditAttribution: Gauravvvv at OpenSense Labs commented
FileSize
3195828-6.patch1.48 KB

Please review if this is working or not.

DuneBL’s picture

DuneBL
Primary language French
CreditAttribution: DuneBL commented
Status: Needs review » Reviewed & tested by the community

Hello, I confirm that patch apply cleanly and is doing the job!!
Thank you.

ilgnerfagundes’s picture

ilgnerfagundes CreditAttribution: ilgnerfagundes at CI&T commented
FileSize
HQz3cOe - Imgur.png32.74 KB

I reviewed the modifications to patch #6, and it looks fine., rtbc +1

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Issue summary: View changes
Status: Reviewed & tested by the community » Needs review
FileSize
Screenshot 2021-02-12 at 17.00.10.png25.05 KB

Can we document steps for reproducing this? I tried to create fieldset with invisible legend but it looks different:

djsagar’s picture

djsagar CreditAttribution: djsagar at OpenSense Labs commented
FileSize
After-Patch-With-legend.png40.22 KB
Afetr-Patch-Without-legend.png33.76 KB

For this issue to replicate i added fieldset in user login form.

You can also use fieldset module for this.

@Gauravmahlawat patch is applied resolved above issue.

RTBC +1 for patch

Thanks!

Abhijith S’s picture

Abhijith S CreditAttribution: Abhijith S as a volunteer and at Zyxware Technologies commented
FileSize
3195828-before.png86.61 KB
3195828-after.png72.88 KB

Applied patch #6 and it works fine.Adding screenshots below.

Before patch:
before

After path:
after

RTBC +1

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
CreditAttribution: mherchel commented
Issue summary: View changes
Issue tags: +Needs reroll

Needs re-roll

Confirmed this is still happening. You can view this on http://dev.demo-olivero.local/form/example-accessibility-labels

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
CreditAttribution: mherchel commented
Status: Needs review » Needs work

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

cindytwilliams’s picture

cindytwilliams CreditAttribution: cindytwilliams at Kanopi Studios commented
Status: Needs work » Needs review
FileSize
3195828-15.patch1.32 KB

Re-rolling patch #6

anish.a’s picture

anish.a CreditAttribution: anish.a at QBurst commented
Issue tags: -Needs reroll
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
CreditAttribution: mherchel commented
Title: Missing padding for fieldset without legend » Olivero: Missing padding for fieldset without legend
Priority: Normal » Minor

Confirmed this is still happening.

xjm’s picture

xjm
she/her
Primary language English
CreditAttribution: xjm at Acquia commented
Priority: Minor » Normal

Normal priority bug under the normal issue priority definition:

Bugs for site visitors that do not interfere with site use, for example, visual layout issues.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
CreditAttribution: andy-blum at Lullabot commented
Status: Needs review » Needs work

Patch no longer applies.

_pratik_’s picture

_pratik_ CreditAttribution: _pratik_ as a volunteer and at Specbee for Drupal India Association commented
Status: Needs work » Needs review
FileSize
3195828-22.patch1.32 KB
interdiff_3195828_15-20.txt1.12 KB

Rerolled for 10.1.x
Patch applying cleanly for me.

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
CreditAttribution: andy-blum at Lullabot commented
Status: Needs review » Needs work

Per tests, patch does not apply.

ameymudras’s picture

ameymudras CreditAttribution: ameymudras at Salsa Digital commented
Status: Needs work » Needs review
FileSize
3195828-25.patch1.12 KB

Trying to fix the issue with the above patch

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
CreditAttribution: andy-blum at Lullabot commented
FileSize
Screenshot 2022-12-27 at 12.20.04 PM.png181.68 KB
Screenshot 2022-12-27 at 12.19.43 PM.png191.63 KB

Padding remains regardless of fieldset legend. RTBC.

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
CreditAttribution: andy-blum at Lullabot commented
Status: Needs review » Reviewed & tested by the community

  • lauriii committed 0498fbfc on 10.1.x 
    Issue #3195828 by Gauravvv, _pratik_, cindytwilliams, ameymudras, andy-...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Status: Reviewed & tested by the community » Fixed

Committed 0498fbf and pushed to 10.1.x. Thanks!

Status: Fixed » Closed (fixed)

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