.container-inline: nested checkbox should not get the trailing ":" [#3329699]

Problem/Motivation

Nesting a checkbox under a .container-inline container form element causes it to get a ":" appended via CSS (:after pseudo-element). Individual radio elements inside a radios group as well as individual checkbox elements inside a checkboxes element seem to be already excluded from this.

Steps to reproduce

- Install Drupal with the standard profile
- Add a field with multi-value support to the page content type
- Create a view, use fields, add the field with multi-value support
- In the modal to configure the View field, expand "Multiple Field Settings"
- Notice that the "Reversed" and "First and Last Only" checkboxes show a ":" after the label.

Proposed resolution

Add a CSS rule to exclude a single checkbox from having a trailing ":", when nested in a .container-inline

Remaining tasks

- Implement fix
- Discuss and review

User interface changes

- Individual checkbox elements do not show a trailing ":", when nested inside a .container-inline.

API changes

- None

Data model changes

- None

Release notes snippet

- TODO

Comment	File	Size	Author
#40	After-applying-patch.png	103.64 KB	sd9121
#40	Before-applying-patch.png	113.16 KB	sd9121
#35	Screenshot from 2023-06-27 13-34-39.png	51.69 KB	jedihe
#34	3329699-trailing-colon-inline-checkbox-34.patch	1.78 KB	jedihe
#25	interdiff-20_25.txt	1.9 KB	gauravvvv
#25	3329699-25.patch	1.85 KB	gauravvvv
#22	Applying-patch-git.png	39.71 KB	akshay kashyap
#21	Applying-patch-git.png	61.68 KB	akshay kashyap
#21	After-apply-patch.png	81.51 KB	akshay kashyap
#20	interdiff-12_20.txt	1.9 KB	gauravvvv
#20	3329699-20.patch	1.85 KB	gauravvvv
#15	Result_After_Patch.png	935.87 KB	shani maurya
#15	Result_Before_Patch.png	1005.76 KB	shani maurya
#13	interdiff_5_12.txt	413 bytes	rishabh vishwakarma
#13	3329699-12.patch	1.09 KB	rishabh vishwakarma
#5	d.o-3329699-UI-bugfix-5.png	42.27 KB	jedihe
#5	3329699-trailing-colon-inline-checkbox-5.patch	611 bytes	jedihe
#2	d.o-3329699-UI-bug.png	41.51 KB	jedihe

Issue fork drupal-3329699

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

3329699-container-inline-nested-checkbox-issue changes, plain diff MR !12119
Check out this branch for the first time

Check out existing branch, if you already have it locally
3329699-.container-inline-nested-checkbox changes, plain diff MR !3168
Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

26 December 2022 at 18:06

jedihe created an issue. See original summary.

Comment #2

jedihe commented 26 December 2022 at 18:09

Status	File	Size
new	d.o-3329699-UI-bug.png	41.51 KB

Attaching screenshot from a simplytest.me instance.

UI bug replicated in a simplytest.me instance

Comment #3

jedihe commented 26 December 2022 at 18:11

Issue summary:

View changes

Comment #4

26 December 2022 at 18:28

jedihe opened merge request !3168

Comment #5

jedihe commented 26 December 2022 at 19:04

Status:

Active

» Needs review

Status	File	Size
new	3329699-trailing-colon-inline-checkbox-5.patch	611 bytes
new	d.o-3329699-UI-bugfix-5.png	42.27 KB

Attaching patch from current MR.

Manually tested in a simplytest.me instance; bug is fixed:

Fixed labels for inline checkboxes, under Multiple field settings

Comment #6

Bushra Shaikh commented 28 December 2022 at 07:19

Assigned:

Unassigned

» Bushra Shaikh

Comment #7

Bushra Shaikh commented 6 January 2023 at 05:18

Assigned:

Bushra Shaikh

» Unassigned

Comment #8

jedihe commented 6 January 2023 at 14:33

Issue summary:

View changes

Comment #9

smustgrave commented 3 February 2023 at 14:52

Priority:	Normal	» Minor
Status:	Needs review	» Reviewed & tested by the community
Issue tags:		+Needs Review Queue Initiative

1 file was hidden/shown/deleted

Status	File	Size
hidden	3329699-trailing-colon-inline-checkbox-5.patch	611 bytes

Can confirm this fixes the issue.

Comment #10

longwave

he/him

English

commented 20 March 2023 at 11:36

Status:

Reviewed & tested by the community

» Needs review

The same CSS is in starterkit_theme and Umami; should the same fixes be applied there?

Also, we have a similar rule for radios, so is it worth adding the same fix for .container-inline .form-type--radio label:after?

Comment #11

smustgrave commented 20 March 2023 at 13:40

Status:

Needs review

» Needs work

Umami maybe? Would need to see this scenario from a frontend standpoint. (Screenshots needed)
Starterkit_theme I think yes as this could be copied for a backend theme maybe?

Comment #12

gauravvvv commented 21 March 2023 at 04:17

Status:

Needs work

» Needs review

Status	File	Size
new	3329699-12.patch	1.85 KB
new	interdiff-5_12.txt	1.82 KB

Updated it for radio element as well.
Also, Made changes in Starterkit_theme and Umami theme.

Umami maybe? Would need to see this scenario from a frontend standpoint. (Screenshots needed)

\
Tried finding a scenario where it is used, but didn't find any. We're using same CSS for all, to keep it uniform updated it in umami as well.

Comment #13

rishabh vishwakarma commented 21 March 2023 at 04:40

Status	File	Size
new	3329699-12.patch	1.09 KB
new	interdiff_5_12.txt	413 bytes

2 files were hidden/shown/deleted

Status	File	Size
deleted	3329699-12.patch	1.85 KB
deleted	interdiff-5_12.txt	1.82 KB

IGNORE

Comment #14

shani maurya

Mumbai

commented 21 March 2023 at 05:15

Assigned:

Unassigned

» shani maurya

Comment #15

shani maurya

Mumbai

commented 21 March 2023 at 05:40

Status:

Needs review

» Reviewed & tested by the community

Status	File	Size
new	Result_Before_Patch.png	1005.76 KB
new	Result_After_Patch.png	935.87 KB

I tested the Patch #12 and it is working fine. Please find the attached image for the results.

Thank You!!

Comment #16

shani maurya

Mumbai

commented 21 March 2023 at 05:53

Assigned:

shani maurya

» Unassigned

Comment #17

21 March 2023 at 06:02

The last submitted patch, , failed testing. View results

Comment #18

21 March 2023 at 06:03

Status:

Reviewed & tested by the community

» Needs work

The last submitted patch, 13: 3329699-12.patch, failed testing. View results

Comment #19

longwave

he/him

English

commented 21 March 2023 at 11:45

+++ b/core/profiles/demo_umami/themes/umami/css/classy/components/container-inline.css
@@ -7,6 +7,8 @@
+.container-inline .form-type-radios label:after,

Should this be .form-type-radios or .form-type--radio?

I suppose we need a form with inline radio buttons to be able to actually test this.

Comment #20

gauravvvv commented 22 March 2023 at 03:04

Status:

Needs work

» Needs review

Status	File	Size
new	3329699-20.patch	1.85 KB
new	interdiff-12_20.txt	1.9 KB

Should this be .form-type-radios or .form-type--radio?

Yes it is .form-type--radio. I have updated the patch.

Comment #21

akshay kashyap commented 22 March 2023 at 09:14

Status	File	Size
new	After-apply-patch.png	81.51 KB
new	Applying-patch-git.png	61.68 KB

@Gauravvvv Thanks for the work. I have applied your patch its working fine on chrome and Firefox browser and also attached the screenshot for the same

Comment #22

akshay kashyap commented 22 March 2023 at 09:17

Status	File	Size
new	Applying-patch-git.png	39.71 KB

1 file was hidden/shown/deleted

Status	File	Size
hidden	Applying-patch-git.png	61.68 KB

Comment #23

akshay kashyap commented 22 March 2023 at 09:19

1 file was hidden/shown/deleted

Status	File	Size
hidden	Applying-patch-git.png	39.71 KB

Comment #24

aziza_a commented 28 March 2023 at 16:36

Status:

Needs review

» Needs work

Applied the patch on #43 and it works, but have not updated there is a typo in class name that it should be .form-type--radio and not .form-type-radio, so moving it to need work again

Comment #25

gauravvvv commented 29 March 2023 at 03:01

Status:

Needs work

» Needs review

Status	File	Size
new	3329699-25.patch	1.85 KB
new	interdiff-20_25.txt	1.9 KB

Updated selector and attached interdiff.

Comment #26

29 March 2023 at 04:11

Status:

Needs review

» Needs work

The last submitted patch, 25: 3329699-25.patch, failed testing. View results

Comment #27

29 March 2023 at 05:06

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

Comment #28

kunal_sahu commented 29 March 2023 at 05:12

Status:

Needs work

» Needs review

I have created an MR , Please review.

.container-inline .form-item label:last-child::after {
  content: none;
}

This CSS code will remove the trailing colon from the label of the last checkbox in a group of nested checkboxes inside an element with the class ".container-inline".

Hope this works. Thanks

Comment #29

30 March 2023 at 13:35

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

Comment #30

smustgrave commented 30 March 2023 at 15:02

Status:

Needs review

» Needs work

I believe #20 was correct. I can't find any reference to form-type--radio in the repo.

If the MR 3168 is the way. Explain why with screenshots.

Comment #31

30 March 2023 at 15:02

Version:

10.1.x-dev

» 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Comment #32

jedihe commented 27 June 2023 at 14:08

Issue summary:

View changes

Comment #33

jedihe commented 27 June 2023 at 18:23

Just fixed the merge conflict for MR 3168.

@kunal_sahu's work made me realize we have to handle 2 cases: with and without description. For elements with a description, keeping the trailing ':' could make sense (notice the gray description right after "Reversed:"):

Looking at the original code, it looks like the trailing ':' was added precisely to handle the case "with-description".

Taking all this into account, I'll switch to using only the :last-child selector.

@smustgrave: I was able to see .form-type--radio in the HTML source, probably constructed dynamically.

Comment #34

jedihe commented 27 June 2023 at 18:29

Status	File	Size
new	3329699-trailing-colon-inline-checkbox-34.patch	1.78 KB

Attaching the patch for the current state of the MR.

Comment #35

jedihe commented 27 June 2023 at 18:37

Status	File	Size
new	Screenshot from 2023-06-27 13-34-39.png	51.69 KB

New patch works great, IMHO:

(This is on Drupal 10.1.0 + patch, using Gin theme).

Comment #36

jedihe commented 12 July 2023 at 03:18

Status:

Needs work

» Needs review

Comment #37

smustgrave commented 13 July 2023 at 16:06

Status:

Needs review

» Needs work

Can before/after screenshots be updated.
Also can the MR be updated for 11.x please

Believe jedihe is working on this so please no one vulture it.

Thanks!

Comment #38

sd9121 commented 14 May 2025 at 03:42

Assigned:

Unassigned

» sd9121

Comment #39

14 May 2025 at 08:27

sd9121 opened merge request !12119

Comment #40

sd9121 commented 14 May 2025 at 08:40

Assigned:	sd9121	» Unassigned
Status:	Needs work	» Needs review

Status	File	Size
new	Before-applying-patch.png	113.16 KB
new	After-applying-patch.png	103.64 KB

I have raised the PR against 11.x and have attached before/after screenshots to demonstrate the UI changes introduced by the patch.

Comment #41

smustgrave commented 1 June 2025 at 01:30

Status:

Needs review

» Needs work

Screenshots appear to be the same but would need to be part of the summary

Comment #42

1 June 2025 at 01:30

Version:

11.x-dev

» main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.