Enable the Floating labels in forms

Created on 17 March 2022, over 2 years ago
Updated 30 March 2023, over 1 year ago

Problem/Motivation

Hello,

I installed the Boostrap5 theme, I want to use floating labels for in my register form.

How to activate this option on the theme?

💬 Support request
Status

Closed: won't fix

Version

1.1

Component

User interface

Created by

🇬🇵Guadeloupe Monster971

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.

  • 🇫🇷France lazzyvn paris

    use field group and field group bootstrap you will have floating label

  • Status changed to Closed: won't fix over 1 year ago
  • 🇦🇺Australia VladimirAus Brisbane, Australia

    Thanks everyone for contribution. 🍻
    Obviously the issue can be solved without modifying the theme.
    Closing...

  • 🇩🇰Denmark ressa Copenhagen

    I got floating labels in my subtheme with these steps:

    1. Copy the input.html.twig file from /bootstrap5/templates/form to templates/form folder in my sub-theme
    2. Tweak this part, from:
      <input{{ attributes }} />
      To:
      <div class="form-floating">
        <input{{ attributes }} />
        <label for="{{ attributes.id }}">{{ attributes.placeholder }}</label>
      </div>
      

    I got the id's to match and placeholder, by setting them in my custom form:

        $form['age'] = [
          '#type' => 'number',
          '#title' => $this->t('Age'),
          '#placeholder' => 'Years old',
          '#attributes' => [
            'class' => ['age'],
            'id' => ['age'],
          ],
          '#required' => TRUE,
        ];
    
Production build 0.71.5 2024