Longueur champ NumberType

Piktux
PHP Symfony

Bonsoir,

Je rencontre un problème de mise en forme d'un champ de formulaire de type NumberType.
Je n'arrive pas modifier la longueur du champ.

Ce que je veux

Arriver à modifier la longueur de ce champ à 50px pour qu'il ne prenne pas toute la largueur de la page.

Dnas mon Type

            ->add('tempMini', NumberType::class, [
                'label' => 'Température mini',
                'attr' => ['placeholder' => 'Entrez la température minimum'],
                'required' => false
            ] )

Dans mon Twig

            <div class="form-group">
                <div class="input-group mb-3">
                    <span class="input-group-text">°C</span>
                    {{ form_widget(formView.tempMini,{ 'attr': {'class': 'moneyType'} }) }}
                </div>
            </div>

Merci d'avance

6 réponses

Arzou

Hello !
Tu utilises bootstrap ? (il me semble que form-group est une classe bootstrap mais le reste je ne sais pas)
Si oui, est ce que tu pourrais copier le coller un peu plus de code, histoire de voir le container de ton div form-group

Merci

StephaneL35

Bonjour,
Effectivement, cela provient des styles de Bootstrap, je pense qu'une modification, assez simple, comme celle-ci, par exemple, commencera à produire un effet :
<div class="form-group">
<div class="input-group mb-3 col-sm-2">
<span class="input-group-text">°C</span>
{{ form_widget(formView.tempMini,{ 'attr': {'class': 'moneyType'} }) }}
</div>
</div>

aka-aka

50px me semble une valeur faible..... Mais as tu essayé de mettre le style a 50px comme ceci ?

<div class="form-group" style="width: 50px">
    <div class="input-group mb-3">
        <span class="input-group-text">°C</span>
            {{ form_widget(formView.tempMini,{ 'attr': {'class': 'moneyType'} }) }}
    </div>
</div>
Piktux
Auteur

Bonjour,

La solution de aka-aka fonctionne. Je n'ai pas pensé à mettre le with à ce niveau là ;)
Merci à tous

Arzou

Oui ça fonctionne mais mettre le style dans le html .. c'est vraiment pas génial ..
Et puis tu mets une largeur fixe, ça serait mieux d'avoir de l'adaptatif, en fonction des écrans.
C'est d'ailleurs en grande partie pour ça que tu dois utiliser bootstrap ;)

aka-aka

En effet @Arzou. Après je répond a la demande ^^.
Si c'est du bootstrap comme dit @StephaneL35 autant ajouter un col-2 ou col-sm-2..
Il est tout a fait possible aussi de le faire directement dans le Type en ajoutant un row_attr

  ->add('tempMini', NumberType::class, [
                'label' => 'Température mini',
                'attr' => ['placeholder' => 'Entrez la température minimum'],
                'required' => false,

                // Ajouter row_attr
                'row_attr' => ['class' => 'col-2'],

            ] )
Arzou

@aka-aka je sais bien et ta réponse était très bien, en aucun cas j'ai voulu critiquer ;)
On va dire que c'était pour améliorer le code une fois le problème résolu ;)

aka-aka

@Arzou no problème :). tu as raison autant optimiser.

@Piktux je te laisse passer le topic en résolu si c'est bon pour toi.