Problem/Motivation

When using the field widget to add an entity to multiple groups there is an issue with how the form is displayed after being added to the first group.

When the form loads - it displays correctly:

When the first group is added, the form renders strangely. The button is stretched the full height and the width of the dropdown is compacted with no spacing between the button and the dropdown.

Steps to reproduce

  1. Add the field widget to a form, allow multiple
  2. Add the entity to a group

Proposed resolution

This issue is the CSS coming from Claro - but I don't know if its technically a bug for claro or entitygroupfield? It could be resolved by adding some additional rules to the existing admin CSS to target the form when it is rendered in the field actions wrapper - but I don't know what impact that would have on other admin theme.

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
Screenshot 2024-02-28 at 09-50-10 Edit Basic page My group page Drush Site-Install.png22.06 KBericgsmith
Screenshot 2024-02-28 at 09-50-56 Create Basic page Drush Site-Install.png18.18 KBericgsmith

Issue fork entitygroupfield-3424179

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

ericgsmith created an issue. See original summary.

ericgsmith opened merge request !14

ericgsmith’s picture

ericgsmith commented
Status: Active » Needs review

Not an expert on flex / the front end - but claro was setting the field actions and form wrapper as display flex - when the form is rendered without first adding to the group the wrappers are just normal divs.

There is likely a more elegant way to style this when using flex - but given not all admin themes will be doing this, it seems safer to just set these back to block within the scope of the widget?

Not sure, it works on claro but I haven't tests on any other admin themes.

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

naveenvalecha’s picture

naveenvalecha
He/Him
commented

Thanks for the PR
I have tested it on a customer project. It works with the claro. I have replaced the css selector with genric one.

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

carsoncho’s picture

carsoncho commented

This was mostly working, but we're using autocomplete widget so I've modified the selector to also target the autocomplete widget as well. Additionally, I added an align-self to fix the group listing title to also be centered.

introfini’s picture

introfini commented

Thanks for the patch. It fixes the issue in Claro and Gin.

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

dww’s picture

dww
we/he/they
commented

Thanks for the report and the fix! Confirmed the bug. Tested with both claro and seven. The new CSS doesn't break seven, and fixes claro. Rebased the MR to get working GitLab pipelines again. Pushed a few commits to make the stylelint job happy. Once the pipeline is green, I'll be merging this.

  • dww committed 6ce2e9f6 on 1.0.x 
    fix: [#3424179] Display issue when using Claro and adding to multiple...

  • dww committed b1d87a9a on 2.0.x 
    fix: [#3424179] Display issue when using Claro and adding to multiple...

dww closed merge request !14

dww’s picture

dww
we/he/they
commented
Status: Needs review » Fixed

Merged. Thanks, y'all!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

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