Floating labels for textareas and select

Created on 24 October 2023, 8 months ago
Updated 1 November 2023, 8 months ago

Problem/Motivation

In the bootstrap_barrio.theme file select and textarea are excluded from floating labels.

if (theme_get_setting('bootstrap_barrio_float_label') &&
        $variables['element']['#type'] != 'radio' &&
        $variables['element']['#type'] != 'checkbox' &&
        $variables['element']['#type'] != 'date' &&
        $variables['element']['#type'] != 'time' &&
        $variables['element']['#type'] != 'search' &&
        $variables['element']['#type'] != 'select' &&
        $variables['element']['#type'] != 'textarea' &&
        $variables['element']['#type'] != 'managed_file') {
    $variables['float_label'] = theme_get_setting('bootstrap_barrio_float_label');
    $variables['label_display'] = 'after';
  }

Is there a reason for this?
Because select and textarea are supported by Bootstrap and I'd like to keep the styling of my form elements consistent: https://getbootstrap.com/docs/5.3/forms/floating-labels/#textareas

I can't see those excludes in the original commits where support for floating labels was added. (See related issues)

Proposed resolution

Remove the 2 lines that exclude select and textarea from floating lables.

✨ Feature request
Status

Needs review

Version

5.5

Component

Code

Created by

πŸ‡©πŸ‡ͺGermany Guido_S Cologne

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

Comments & Activities

  • Issue created by @Guido_S
  • First commit to issue fork.
  • Status changed to Needs review 8 months ago
  • πŸ‡¦πŸ‡·Argentina tguerineau

    Hello,

    I've been working on addressing this issue and have created a MR with the necessary adjustments. Here's an overview of the changes:

    1- Removed Exclusions: In the bootstrap_barrio.theme file, I've removed the lines that excluded select and textarea from floating labels support.

    2- Textarea Adjustments:
    - Twig template updated: I modified the textarea twig template to adjust its height based on Bootstrap's recommendation. This will ensure a more consistent and visually appealing form design.
    - Height Consistency: I've updated the textarea twig template to include a height of 150px. This ensures that textareas maintain a consistent height irrespective of whether the floating label feature is activated or not.
    - Hook Preprocess for Textarea: I introduced a hook_preprocess_textarea in the theme file. This hook checks if the 'float_label' theme setting is enabled and accordingly sets a placeholder for the textarea. This placeholder is essentially the title of the textarea, making it intuitive for end-users.

    3 - Floating Labels for Select Inputs: Following the Bootstrap documentation, the <label> for .form-selects is always displayed in its floated state. This caters to Bootstrap's specifications and ensures a unified design approach.

    Please review the changes and let me know if there are further adjustments needed.

  • Open on Drupal.org β†’
    Core: 10.1.0-alpha1 + Environment: PHP 7.4 & MySQL 5.7
    last update 8 months ago
    Waiting for branch to pass
  • @tguerineau opened merge request.
  • πŸ‡§πŸ‡ͺBelgium mgstables

    Have tested it on the contact form and the variable "float_label" is not addressed in "textarea.html.twig". So the style (150px) is not applied and the "text-wrapper" remains.

Production build 0.69.0 2024