Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Form] Bootstrap 5 Form Theme's "Floating Labels" don't work with MoneyType #52081

Open
simoheinonen opened this issue Oct 16, 2023 · 5 comments
Open

[Form] Bootstrap 5 Form Theme's "Floating Labels" don't work with MoneyType #52081

simoheinonen opened this issue Oct 16, 2023 · 5 comments
Labels
Bug Form Status: Needs Review

Comments

@simoheinonen
Copy link
Contributor

simoheinonen commented Oct 16, 2023 •
edited by OskarStark

Symfony version(s) affected

>=5.4

Description

Floating labels don't work with MoneyType.

image

How to reproduce

<?php

declare(strict_types=1);

namespace App\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\MoneyType;
use Symfony\Component\Form\Extension\Core\Type\NumberType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;

class FooType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('Number', NumberType::class, [
                'label' => 'Number',
                'attr' => [
                    'placeholder' => 'Number',
                ],
                'row_attr' => [
                    'class' => 'form-floating m-3',
                ],
            ])
            ->add('Text', TextType::class, [
                'label' => 'Text',
                'attr' => [
                    'placeholder' => 'Text',
                ],
                'row_attr' => [
                    'class' => 'form-floating m-3',
                ],
            ])
            ->add('Money', MoneyType::class, [
                'label' => 'Money',
                'attr' => [
                    'placeholder' => 'Money',
                ],
                'row_attr' => [
                    'class' => 'form-floating m-3',
                ],
            ])
        ;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
    <div class="container mt-5">
        {{ form(form) }}
    </div>
</body>
</html>

Possible Solution

No response

Additional Context

No response
@stof
Copy link
Member

stof commented Oct 17, 2023

The bootstrap documentation does not seem to have any example combining their float label feature and their input group feature. So we cannot be sure whether our form theme renders the right markup for this combination (or even whether a valid markup for this combination even exists as it might be an unsupported case in Bootstrap)

@mbabker
Copy link
Contributor

mbabker commented Oct 17, 2023

The bootstrap documentation does not seem to have any example combining their float label feature and their input group feature.

It does, see https://getbootstrap.com/docs/5.3/forms/floating-labels/#input-groups

@OskarStark OskarStark changed the title [Form] Bootstrap 5 Form Theme's Floating Labels don't work with MoneyType [Form] Bootstrap 5 Form Theme's Floating Labels don't work with MoneyType Oct 20, 2023
@OskarStark OskarStark changed the title [Form] Bootstrap 5 Form Theme's Floating Labels don't work with MoneyType [Form] Bootstrap 5 Form Theme's "Floating Labels" don't work with MoneyType Oct 20, 2023
@stof
Copy link
Member

stof commented Oct 24, 2023

The issue is that you add the form-floating class in row_attr. But when combining form-floating and input-group, the form-floating does not go on the root element (as that would put it in the same place than the input-group class)

@carsonbot
Copy link

Hey, thanks for your report!
There has not been a lot of activity here for a while. Is this bug still relevant? Have you managed to find a workaround?

@JalenWasHere
Copy link

Here's a workaround. I am using floating labels as a default and extending from _include though.

{% extends '_include/bootstrap_5_layout.html.twig' %}

{%- block form_widget -%}
    {% set attr = attr|merge({placeholder: ''}) %}
    {{ parent() }}
{% endblock %}

{%- block form_widget_simple -%}
    {% set attr = attr|merge({placeholder: ''}) %}
    {{ parent() }}
{% endblock %}

{%- block form_row -%}
    {% set row_class = (row_class|default('')) ~ ' form-floating mb-3' -%}
    {{ parent() }}
{% endblock %}

{% block money_row -%}
    {% set attr = attr|merge({placeholder: ''}) %}
    {%- set row_class = row_class|default(row_attr.class|default('mb-3')|trim) -%}
    <div{% with {attr: row_attr|merge({class: row_class})} %}{{ block('attributes') }}{% endwith %}>
        {{- form_widget(form) -}}
        {{- form_help(form) -}}
        {{- form_errors(form) -}}
    </div>
{% endblock %}

{% block money_widget -%}
    {%- set prepend = not (money_pattern starts with '{{') -%}
    {%- set append = not (money_pattern ends with '}}') -%}
    {%- if prepend or append -%}
        <div class="input-group {{ group_class|default('') }}">
            {%- if prepend -%}
                <span class="input-group-text">{{ money_pattern|form_encode_currency }}</span>
            {%- endif -%}
            <div class="form-floating">
                {{- form_widget(form) -}}
                {{- form_label(form) -}}
            </div>
            {%- if append -%}
                <span class="input-group-text">{{ money_pattern|form_encode_currency }}</span>
            {%- endif -%}
        </div>
    {%- else -%}
        {{- block('form_widget_simple') -}}
    {%- endif -%}
{%- endblock money_widget %}

@carsonbot carsonbot removed the Stalled label May 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Form Status: Needs Review
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@mbabker @stof @simoheinonen @carsonbot @JalenWasHere