Problem/Motivation

Gin provides it's own CSS for media_browser which makes use of the class entities-list--single-item though the module doesn't apply this class.

When a field has a cardinality of 1, the wrapper is still given the multiple-selection class of entities-list which places single item selections into a grid.

This doesn't happen on Claro because I believe Claro does not interfere with the CSS as Gin does.

Ultimately, changing the wrapper class, client side, based on the number of selections would be the best option, but my quick fix here would be to swap out the class based on cardinality only from the server side.

Steps to reproduce

* Using Gin
* Add a media field accepting remote video and images (issue will occur for both though the video has the worst result appearance).
* Add a cardinality of 1
* Change the widget to be entity browser
* In the node with the test field, add a remote video
* In the selected items preview on the node edit form the video is squished (same with image, but the image at least squares off, so its less of a problem).
* When viewing the source, there is a parent element with the class "entities-list" (which uses a grid) - when changing this to class to "entities-list--single-item" the problem is fixed as the grid is removed.

You can see the SCSS for this gin styling in entity_browser.scss

Proposed resolution

Changing this class based on cardinality.

Remaining tasks

None

User interface changes

None

API changes

None

Data model changes

None

Issue fork entity_browser-3552528

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

cb created an issue. See original summary.

cb opened merge request !113

cb’s picture

cb
Location Sydney
commented

I have pushed and created a pull request.

Note that I changed the order of how the classes are added to ensure the hierarchy remains consistent when looking at the class list in the element.

jhuhta’s picture

jhuhta commented
Status: Active » Reviewed & tested by the community

I was about to do something similar when I found the css class entities-list--single-item being mentioned but unused.

This works and does the trick for us.

Note that the styling can look very different though for a page editor - maybe a warning should be issued, or some restyling done for the fields with single cardinality.

acbramley’s picture

acbramley commented

+1 to this fix, works perfectly thanks!

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Status: Reviewed & tested by the community » Fixed

Thanks!

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.