Select2 styling is messed up by #drupal-off-canvas styles in Layout Builder

Created on 12 October 2022, about 2 years ago
Updated 31 July 2023, over 1 year ago

Problem/Motivation

I installed the Select 2 module, and then in my custom module I'm developing a custom Layout Builder form. When I change the form element "#type" to "select2," the functionality works, but the styles don't match other form elements in Layout Builder—in fact, it doesn't appear at all. There is just a blank area where the select field should be but you can click there and get the dropdown. I am using a multiple: TRUE field so I can select multiple options in the UI to, for example, add classes based on breakpoints. The only CSS being applied is from the offcanvas core styles and select2's styles when inspecting the elements that make up the input. I'm using the Claro admin theme.

Screenshots:

Some example code:

$form['ui']['appearance']['typography']['text_align'] = [
      // If Select2 is enabled, use that; otherwise, normal select!
      '#type' => (\Drupal::moduleHandler()->moduleExists('select2')) ? 'select2' : 'select',
      '#title' => $this->t('Text alignment'),
      '#options' => $text_align_options,
      '#default_value' => $this->configuration['text_align'],
      '#description' => $this->t('<em>All content</em> in this section will be
      forced to this alignment! You can select different
      alignments for different screen sizes (mobile+, tablet (SM), laptop (MD),
      desktop (LG), etc.'),
      '#empty_option' => $this->t('- None -'),
      '#empty_value' => '',
      '#multiple' => TRUE,
    ];

Steps to reproduce

  1. Install Layout Builder module from core.
  2. Install Select 2 module via Composer the usual way.
  3. Configure a Layout Builder layout plugin in a custom module similar to this: How to register layouts , with a "'#type' => 'select2'" field similar to above code.
  4. Go to Layout Builder and observe the styling of the field.
  5. Notice that the Select2 field is unstyled.

Proposed resolution

Include some type of styling for Layout Builder in the included Claro, Seven, and Gin CSS stylesheets? Not sure. There may be something I'm missing and this "works as designed," if so, please let me know!

💬 Support request
Status

Active

Version

1.0

Component

User interface

Created by

🇺🇸United States dalemoore

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024