Issue #3278896 by marcoscano, hawkeye.twolf, mtift, dead_arm, frangrit:...

Entity Browser Vertical

# Entity Browser Vertical

## Overview

This module provides a new Widget Display plugin that will show labels of

referenced entities, but stack them vertically using CSS.

This is not a fully-featured tabledrag element, but it looks similar, with

comparable functionality. This can be seen as a simplified version of the patch

in https://www.drupal.org/project/entity_browser/issues/2973457 , and may

become obsolete if/when that patch lands in Entity Browser.

## Configuration

After installing the module, edit your Entity Browser widget settings in the

form display configuration form, and select "Entity label, stacked vertically"

as the display plugin.

entity_browser.field_widget_display.entity_browser_vertical_label:

  type: mapping

  label: 'Entity label, stacked vertically'

/**

 * @file

 * Tweaks the entity-reference Entity Browser widgets.

 */

.entities-list.entity-browser-vertical .item-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 100%;

  border: 2px solid #CCC;

  background-color: #EEE;

  flex-direction: row;

}

.entities-list.entity-browser-vertical .item-container input {

  display: flex!important;

  margin: inherit!important;

}

.entities-list.entity-browser-vertical .item-container .tabledrag-handle {

  margin-left: 1rem;

}

name: Entity Browser Vertical

type: module

description: Allows to display referenced entities stacked vertically in Entity Browser widgets.

core_version_requirement: 9.x

package: Media

dependencies:

  - entity_browser:entity_browser

entity_browser_vertical:

  css:

    theme:

      css/entity_browser_vertical.css: {}

  js:

    js/entity_browser_vertical.js: {}

  dependencies:

    - core/tabledrag