Problem/Motivation

The alignment of radio and checkbox elements within webforms using Civictheme appears to be misaligned. Instead of being displayed inline with their corresponding labels, these elements seem to be misaligned, causing a discrepancy in the layout. This issue undermines the visual consistency and usability of webforms created with Civictheme.

Issue Webform

Steps to reproduce

  1. Visit a webpage utilizing Civictheme, containing a webform with radio or checkbox elements.
  2. Observe the layout of the radio and checkbox elements in relation to their labels.
  3. Notice that the radio and checkbox elements are not properly aligned with their labels.

Expected outcome

The radio and checkbox elements within the webform should align horizontally with their corresponding labels, ensuring a cohesive and intuitive layout. Users should be able to interact with these elements seamlessly, enhancing the overall user experience of the webform.

Additional Details

This issue can be observed on the Civictheme demo website at https://www.civictheme.io/subscribe.

CommentFileSizeAuthor
#5 Screenshot 2024-03-21 at 9.34.15 AM.png114.79 KBjoshua1234511
Screenshot 2024-03-20 at 10.14.28 AM.png26.6 KBjoshua1234511

Issue fork civictheme-3432290

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:

About issue forks

Comments

joshua1234511 created an issue. See original summary.

joshua1234511’s picture

joshua1234511
Primary language English
Location Goa
commented
Issue summary: View changes
fionamorrison23’s picture

fionamorrison23 commented
Assigned: Unassigned » joshua1234511

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

joshua1234511’s picture

joshua1234511
Primary language English
Location Goa
commented
StatusFileSize
new Screenshot 2024-03-21 at 9.34.15 AM.png114.79 KB

@alexskrypnyk

The wrapper https://github.com/civictheme/uikit/blob/main/components/02-molecules/fo...
for radios and checkbox need to be 'flex' 

  &ct-form-element--radio,
  &ct-form-element--checkboxes {
    display: flex;
  }

Reason: https://github.com/civictheme/uikit/blob/main/components/02-molecules/fo...
Label is not printed within the input element but rather outside.

Content is never passed to https://github.com/civictheme/uikit/blob/main/components/02-molecules/fo...
rather label has its own component 'form-element-label'

Issue image

joshua1234511’s picture

joshua1234511
Primary language English
Location Goa
commented
Assigned: joshua1234511 » alex.skrypnyk
alex.skrypnyk’s picture

alex.skrypnyk
he/him
Primary language English
Location Melbourne
commented
Assigned: alex.skrypnyk » fionamorrison23

The work required here would be happening in the UI Kit.

@fionamorrison23
We can have a hotfix for this in 1.7 or we can wait until 1.8 to get it properly fixed with all the other work done for form elements.

If we to do the hotfix, that code will be removed in the 1.8, so not a reusable piece of work.

Could you please advise on the priority of this one.

alex.skrypnyk’s picture

alex.skrypnyk
he/him
Primary language English
Location Melbourne
commented
Assigned: fionamorrison23 » alex.skrypnyk
Status: Active » Fixed
Issue tags: +civictheme-release-1.8

Implemented and will be released in 1.8

see https://www.drupal.org/project/civictheme/issues/3415674

alex.skrypnyk’s picture

alex.skrypnyk
he/him
Primary language English
Location Melbourne
commented
Related issues: +#3415674: Update integration to use new `Field` molecule

Status: Fixed » Closed (fixed)

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

fionamorrison23’s picture

fionamorrison23 commented