Mr B
Mr B

Reputation: 4130

How to customise bootstrap horizontal form theme/template in Symfony?

I am working on an application built using Symfony 3. I am using the 'bootstrap_3_horizontal_layout.html.twig' form theme that came with the framework.

I have imported it successfully.

I tried to change the default column sizes; http://pastebin.com/7QvEQyVi but doesn't seem to have any effect.

The default sizes are 2 and 10 for the labels and input columns respectively. How can I override these values?

Appreciate any guidance

Upvotes: 2

Views: 5369

Answers (2)

Mr B
Mr B

Reputation: 4130

I got it working by placing the modified block in a separate file as per @jkuchravic's answer;

app/Resources/views/form/fields.html.twig

{% use 'bootstrap_3_horizontal_layout.html.twig' %}

{% block form_label_class -%}
col-sm-3
{%- endblock form_label_class %}

{% block form_group_class -%}
col-sm-9
{%- endblock form_group_class %}

I didn't want to make the change application-wide so just applied the modified template to that particular form using the following line:

{% form_theme form with ['bootstrap_3_horizontal_layout.html.twig','form/fields.html.twig'] %}

Upvotes: 6

jkucharovic
jkucharovic

Reputation: 4244

You can override it in your own template

app/config/config.yml

# Twig Configuration
twig:
    form_themes:
        - "form/fields.html.twig"

app/Resources/views/form/fields.html.twig

{% use 'bootstrap_3_horizontal_layout.html.twig' %}

{% block form_label_class -%}
col-sm-3
{%- endblock form_label_class %}

{% block form_group_class -%}
col-sm-9
{%- endblock form_group_class %}

Upvotes: 7

Related Questions