Problem/Motivation

When a radios, checkboxes, fieldset or fieldgroup element is child of a fieldset or fieldgroup element, their legend positions are messed up.

Screenshot:

Proposed resolution

Fix <legend> CSS.

Remaining tasks

User interface changes

API changes

CommentFileSizeAuthor
#15 2498163-success.png117.24 KBMrPaulDriver
#13 seven-legend_overlap-2498163-13.patch467 bytesjeni_dc
#6 Logging_and_errors___D8_Patch 2.png54.48 KBnathanlawsn
#6 Logging_and_errors___D8_Patch.png51.5 KBnathanlawsn
#6 Screen Shot 2015-07-23 at 11.16.08.png81.04 KBnathanlawsn
#4 legend-2498163-4-do-not-test.patch775 bytesArla
#1 Screen Shot 2015-06-01 at 11.48.07.png32.93 KBArla
#1 legend-2498163-1.patch467 bytesArla
Screen Shot 2015-06-01 at 11.47.47.png30.44 KBArla
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Arla’s picture

Arla
they/them
CreditAttribution: Arla at MD Systems GmbH commented
Status: Active » Needs review
FileSize
legend-2498163-1.patch467 bytes
Screen Shot 2015-06-01 at 11.48.07.png32.93 KB

Screenshot of fix:

idebr’s picture

idebr CreditAttribution: idebr commented

@Arla I'm having trouble reproducing this error. Can you provide an example URL or code?

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman at Wunder commented
Component: CSS » Seven theme
Issue tags: +frontend

Is this when you have two legends inside of a fieldset?

Arla’s picture

Arla
they/them
CreditAttribution: Arla at MD Systems GmbH commented
FileSize
legend-2498163-4-do-not-test.patch775 bytes

For an example, apply this (silly) patch and check the page at admin/config/development/logging

Manjit.Singh’s picture

Manjit.Singh
Primary language Hindi
Location Chandigarh
CreditAttribution: Manjit.Singh at Srijan | A Material+ Company commented
nathanlawsn’s picture

nathanlawsn CreditAttribution: nathanlawsn commented
Status: Needs review » Needs work
FileSize
Screen Shot 2015-07-23 at 11.16.08.png81.04 KB
Logging_and_errors___D8_Patch.png51.5 KB
Logging_and_errors___D8_Patch 2.png54.48 KB

Patch in #4 reproduces this error.

Screenshot showing error with legends overlapping

Applying the original patch in #1 fixes the issue with the legends overlapping but the fieldset legend no longer sits inline with the border. Should this be the case?

Screenshot showing the issue has been fixed but results in other issues

Should it not look more like this?

Screenshot showing the issue has been fixed but results in other issues

Manjit.Singh’s picture

Manjit.Singh
Primary language Hindi
Location Chandigarh
CreditAttribution: Manjit.Singh at Srijan | A Material+ Company commented

@nathanlawson91 I did not found any fieldsets on admin/config/development/logging

Where can i check these fieldsets ?

emma.maria’s picture

emma.maria
she/her
CreditAttribution: emma.maria commented

@Manjit.Singh for some reason you need to apply the patch in #4 to see the issue. I cannot figure out why though. Maybe ping the Seven maintainer @lewisnyman for more info.

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman at Wunder commented

Yeah, you have to apply the do-not-test.patch to provide an example of a fieldset. We don't have any in core but contrib will have them.

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman at Wunder commented

The design of the fieldset should follow the design in https://groups.drupal.org/node/283223

Manjit.Singh’s picture

Manjit.Singh
Primary language Hindi
Location Chandigarh
CreditAttribution: Manjit.Singh at Srijan | A Material+ Company commented

@Emma Thanks for the help. But is there any need to apply fieldset here.

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman at Wunder commented

@Manjit.Singh No, it's just an example implementation

jeni_dc’s picture

jeni_dc CreditAttribution: jeni_dc commented
FileSize
seven-legend_overlap-2498163-13.patch467 bytes

Changing the fieldset CSS to only select the direct child legend fixes the overlap. I've attached a patch with the quick change.

jeni_dc’s picture

jeni_dc CreditAttribution: jeni_dc commented
Status: Needs work » Needs review
MrPaulDriver’s picture

MrPaulDriver CreditAttribution: MrPaulDriver commented
FileSize
2498163-success.png117.24 KB

Patch at #13 seems to fix

2498163 success

MrPaulDriver’s picture

MrPaulDriver CreditAttribution: MrPaulDriver commented
Status: Needs review » Reviewed & tested by the community

Visual check indicates problem resolved as per screen shot in previous post. Code appears fine.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
CreditAttribution: alexpott at Chapter Three commented
Status: Reviewed & tested by the community » Fixed

Committed 231b59f and pushed to 8.0.x. Thanks!

  • alexpott committed 231b59f on 8.0.x 
    Issue #2498163 by Arla, jeni_dc, nathanlawson91, MrPaulDriver,...

Status: Fixed » Closed (fixed)

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