The asterisk (*) mark not visible for the mandatory/required fields.

Created on 15 September 2023, 9 months ago
Updated 21 May 2024, 26 days ago

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:

๐Ÿ› Bug report
Status

RTBC

Version

3.0

Component

Code

Created by

๐Ÿ‡ฎ๐Ÿ‡ณIndia Shyam_Bhatt Gujarat

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @Shyam_Bhatt
  • Status changed to Needs review 9 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Shyam_Bhatt Gujarat

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

    After patch:

  • Issue was unassigned.
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Shyam_Bhatt Gujarat
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Sonal Gyanani

    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

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia nilesh.k

    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.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia sdhruvi5142

    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

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Shyam_Bhatt Gujarat

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

    Thanks

  • Status changed to RTBC 8 months ago
  • Status changed to Needs work 8 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States mlncn Minneapolis, MN, USA

    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;
    }
    
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Preeti.chawla

    Preeti.chawla โ†’ made their first commit to this issueโ€™s fork.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Preeti.chawla

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

  • First commit to issue fork.
  • Merge request !13issue fixed โ†’ (Open) created by adarshv
  • Status changed to Needs review about 2 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia adarshv

    Issue fixed. Please review MR !13 above,

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

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia sdhruvi5142

    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.

  • Status changed to RTBC 26 days ago
Production build 0.69.0 2024