Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.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.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | 3396289-floating-labels-focus.png | 26.85 KB | tguerineau |
| #2 | 3396289-floating-labels.png | 27.03 KB | tguerineau |
Issue fork bootstrap_barrio-3396289
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:
- 3396289-floating-labels-for
changes, plain diff MR !70
Comments
Comment #2
tguerineau commentedHello,
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.themefile, 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-selectsis 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.
Comment #4
mgstablesHave 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.
So for now I put the "textarea.html.twig" in my subtheme and adjusted it so it works.
Comment #7
hatuhay commented