Add CSS to Form Type is Symfony2

Question

I have an edit form, The form is made through symfony2 Form types. I checked the documentation but couldn't find any option for adding CSS to the form. The form display the data correctly and everything is fine what I want to do is to add styling to each field.

My Edit Type is

 public function buildForm(FormBuilder $builder, array $options)
{
    $builder
    ->add('id', 'hidden')
    ->add('patent_name', 'text', array('label' => 'Patent Name'))
    ->add('description', 'textarea', array('label' => 'Description', 'required' => false))
    ->add('appln_auth','text', array('label' => 'Application Authorization'))
    ;
}

Anyone has any idea ho I can add css ?

Thanks

It is semantically wrong thing to add presentation stuff (CSS styles, ...) to your FormTypes (logic). So don't do that even if that is possible — Peyman Mohamadpour
– Peyman Mohamadpour, Commented Mar 11, 2017 at 12:13

Ahmed Siouani · Accepted Answer · 2012-10-10 09:22:36Z

Here is the way you can do it when building your form,

 $builder->add('field_name', 'text', array('label' => 'Field Label', 'attr' => array('class' => 'fieldClass')));

You can also do it when rendering your form fields, take a look at Twig template form function reference

{{ form_label(form.field, 'label', { 'attr': {'class': 'foo'} }) }}
{{ form_widget(form.field, { 'attr': {'class': 'bar'} }) }}

You can then add a css file in your bundle public assets and call it in your template using,

{% block stylesheets %}
    {% parent() %} {# if you want to keep base template's stylesheets #}
    <link href="{{ asset('bundle/myBundle/css/stylesheet.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}

You've then to make your public assets be accessible through your web/ directory. The best way to do it is to create symbolic links targeting your bundle public assets, you've then to execute

assets:install web/ --symlink

Another useful approach when you want to thoroughly customize specific form field rendering block (Twig) is to define a new form theme, here's the documentation > Form theming in Twig.

DonCallisto · Accepted Answer · 2012-10-10 07:05:16Z

1

If you want to add class to your fields, you have to use attr special attribute with your build form's add action in that way

$builder->add('field_name', 'yourType', array('attr' => array('class' => 'fieldClass')));

If you want to link your style sheet instead, you have to use assets.
You can find more on assets here

To work with assets you have to do:

create your css file
install your assets with assets:install (I suggest to use --symlink option that will reflect css changes unless they are cached)
enjoy your CSS by using it into your template. In case of twig, you have do to <link href="{{ asset('bundles/acmebundle/css/style.css') }}" type="text/css" rel="stylesheet"> (where acmebundle is your bundle)

answered Oct 10, 2012 at 7:05

DonCallisto

30k9 gold badges74 silver badges104 bronze badges

Comments

Omid Kamangar · Accepted Answer · 2012-10-09 21:31:19Z

0

This might help:

$builder->add('patent_name', 'text', array('label' => 'Patent Name', 'attr' => array('class' => 'someclass')));

answered Oct 9, 2012 at 21:31

Omid Kamangar

5,7889 gold badges44 silver badges70 bronze badges

Comments

Abhi Das · Accepted Answer · 2019-12-02 06:06:55Z

You can add CSS styling for ChoiceType like this:

->add('triage', DocumentType::class, [
                    'label' => 'Triage',
                    'required' => false,
                    'placeholder' => 'select',
                    'label_attr' => [
                        'class' => 'col-sm-2 control-label',
                    ],
                    'choice_attr' => function($choice, $key, $value) {
                        return ['style' => 'background:' . $choice->getColorCode().'; color:white;'];
                    },
                    'class' => 'AppBundle:TriageMaster',
                    'choice_label' => 'triage',
                ])

Here I'd used the data from the choice to select the CSS style.

Collectives™ on Stack Overflow

Add CSS to Form Type is Symfony2

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related