Problem/Motivation

For every form, the asterisk (*) mark is not visible for the mandatory/required fields.

Steps to reproduce

  1. Install Bulma theme with Drupal 10.
  2. Install and enable the Web from module.
  3. Create a form with some required fields, On the frontend side the asterisk (*) mark is not visible for the mandatory/required fields.

Please check the below image:
2023-09-15/screenshot-2023-09-15.png

Issue fork bulma-3387496

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:

Comments

Shyam_Bhatt created an issue. See original summary.

shyam_bhatt’s picture

Status: Active » Needs review
StatusFileSize
new2.37 KB
new41.52 KB

Adding a patch to resolve this issue. Please check and verify. Moving to + Needs review.

After patch:
2023-09-15/3387496-2-after.png

shyam_bhatt’s picture

Assigned: shyam_bhatt » Unassigned
Sonal Gyanani’s picture

Applied patch#2 it is working fine but the asterisk mark looks stretched we can fix it by providing the same height and width

.form-required:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI0VFMDAwMCIgIGQ9Ik0wLDcuNTYybDEuMTE0LTMuNDM4YzIuNTY1LDAuOTA2LDQuNDMsMS42ODgsNS41OSwyLjM1QzYuMzk4LDMuNTUzLDYuMjM3LDEuNTQ0LDYuMjIsMC40NDdoMy41MTEgYy0wLjA1LDEuNTk3LTAuMjM0LDMuNi0wLjU1OCw2LjAwM2MxLjY2NC0wLjgzOCwzLjU2Ni0xLjYxMyw1LjcxNC0yLjMyNUwxNiw3LjU2MmMtMi4wNSwwLjY3OC00LjA2LDEuMTMxLTYuMDI4LDEuMzU2IGMwLjk4NCwwLjg1NiwyLjM3MiwyLjM4MSw0LjE2Niw0LjU3NWwtMi45MDYsMi4wNTljLTAuOTM1LTEuMjc0LTIuMDQxLTMuMDA5LTMuMzE2LTUuMjA2Yy0xLjE5NCwyLjI3NS0yLjI0NCw0LjAxMy0zLjE0Nyw1LjIwNiBsLTIuODU2LTIuMDU5YzEuODcyLTIuMzA3LDMuMjExLTMuODMyLDQuMDE3LTQuNTc1QzMuODQ5LDguNTE2LDEuODcyLDguMDYyLDAsNy41NjIiLz48L3N2Zz4K);
  background-size: 8px 8px;
  content: "";
  display: inline-block;
  vertical-align: super;
  line-height: 1;
  height: 8px;
  width: 8px;
}

Thanks

nilesh.k’s picture

StatusFileSize
new115.26 KB

Hi
On my local system, patch number #2 is not applying. However, after adding the code and manually incorporating the code changes from comment #4, the asterisk mark is displaying correctly.

after

sdhruvi5142’s picture

StatusFileSize
new110.49 KB

Tested - https://www.drupal.org/files/issues/2023-09-15/3387496-2.patch
Testing Comments:
After applying the patch this issue is fixed. Tested the mentioned fields as well as added some more other fields to check (*) sign for the fields which are set as required and it is working for those fields also.
Status - PASS

shyam_bhatt’s picture

Hi @sdhruvi5142
If testing is passed, please change status from Needs Review to RTBC.

Thanks

sdhruvi5142’s picture

Status: Needs review » Reviewed & tested by the community
mlncn’s picture

Status: Reviewed & tested by the community » Needs work

We don't need and shouldn't use an SVG here— core and other themes simply use an asterisk. Here is an example of how Gin theme handles it:

.form-required::after {
  content: "*";
  color: var(--gin-color-danger);
  line-height: 1;
  margin-right: .15em;
  margin-left: .15em;
  vertical-align: text-top;
  background: none;
}

Preeti.chawla made their first commit to this issue’s fork.

preeti.chawla’s picture

StatusFileSize
new812 bytes

I have created new patch with proposed solution to resolve the issue. Please review

preeti.chawla’s picture

StatusFileSize
new30.88 KB

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

adarshv’s picture

Status: Needs work » Needs review

Issue fixed. Please review MR !13 above,

tanuja bohra’s picture

StatusFileSize
new11.53 KB
new15.66 KB

Verified MR13 on 10.2.x, the asterisk is added and looks fine. RTBC++

sdhruvi5142’s picture

StatusFileSize
new157.01 KB

Hi
Verified MR13! and the fixes are working as expected.

Testing Steps followed:
1. Install Bulma theme with Drupal 10.
2. Install and enable the Web from module.
3. Create a form with some required fields. Changes observed here.

Testing result:
The asterik(*) are being properly working as expected for the required fields.

Status : PASS
Attaching SS for reference.

sdhruvi5142’s picture

Status: Needs review » Reviewed & tested by the community
mlncn’s picture

This is fixed more generically and not only for webform in #3420212: Add asterisk to webform required fields. Can folks here confirm, testing either supported dev release (1.x or 3.x)?