Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Symfony2 form theme to integrate Materialize in your Symfony2 forms
{% extends 'form_div_layout.html.twig' %}
{% block form_row -%}
<div class="row{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
<div class="input-field col s12">
{{- form_widget(form) -}}
{{- form_label(form) -}}
{{- form_errors(form) -}}
</div>
</div>
{%- endblock form_row %}
{% block form_widget_simple %}
{% if type is not defined or type not in ['file', 'hidden'] %}
{%- set attr = attr|merge({class: (attr.class|default(''))|trim}) -%}
{% endif %}
{{- parent() -}}
{% if tooltip is defined %}
<span class="material-icons dp48 tooltipped"
data-position="bottom" data-delay="50" data-tooltip="{{ tooltip }}">error
</span>
{% endif %}
{% endblock form_widget_simple %}
{% block form_label -%}
{%- set label_attr = label_attr|merge({class: (label_attr.class|default(''))|trim}) -%}
{{- parent() -}}
{%- endblock form_label %}
{% block checkbox_row -%}
<div class="row {% if not valid %} has-error{% endif %}">
{{- form_widget(form) -}}
{{- form_label(form) -}}
{{- form_errors(form) -}}
</div>
{%- endblock checkbox_row %}
{% block checkbox_widget -%}
<input type="checkbox" class="filled-in"{{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
{%- endblock checkbox_widget %}
{# Checkbox label is raw here #}
{%- block checkbox_label -%}
{% if label is not same as(false) -%}
{% if not compound -%}
{% set label_attr = label_attr|merge({'for': id}) %}
{%- endif -%}
{% if required -%}
{% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %}
{%- endif -%}
{% if label is empty -%}
{%- if label_format is not empty -%}
{% set label = label_format|replace({
'%name%': name,
'%id%': id,
}) %}
{%- else -%}
{% set label = name|humanize %}
{%- endif -%}
{%- endif -%}
<label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>
{{ translation_domain is same as(false) ? label|raw : label|trans({}, translation_domain)|raw }}
</label>
{%- endif -%}
{%- endblock -%}
{% block button_widget -%}
{% set attr = attr|merge({class: (attr.class|default('waves-effect waves-light') ~ ' btn')|trim}) %}
{{- parent() -}}
{%- endblock %}
{%- block choice_widget_collapsed -%}
{%- if required and placeholder is none and not placeholder_in_choices and not multiple and (attr.size is not defined or attr.size <= 1) -%}
{% set required = false %}
{%- endif -%}
<select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
{%- if placeholder is not none -%}
<option value=""{% if required %} disabled="disabled" {% if value is empty %} selected="selected"{% endif %}{% endif %}>{{ placeholder != '' ? (translation_domain is same as(false) ? placeholder : placeholder|trans({}, translation_domain)) }}</option>
{%- endif -%}
{%- if preferred_choices|length > 0 -%}
{% set options = preferred_choices %}
{{- block('choice_widget_options') -}}
{%- if choices|length > 0 and separator is not none -%}
<option disabled="disabled">{{ separator }}</option>
{%- endif -%}
{%- endif -%}
{%- set options = choices -%}
{{- block('choice_widget_options') -}}
</select>
{%- endblock choice_widget_collapsed -%}
{%- block textarea_widget -%}
{% set attr = attr|merge({class: (attr.class|default('') ~ 'materialize-textarea')|trim}) %}
{{ parent() }}
{%- endblock -%}
{%- block form_errors -%}
{%- if errors|length > 0 -%}
<ul>
{%- for error in errors -%}
<li class="error">{{ error.message }}</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- endblock form_errors -%}
@newradius

This comment has been minimized.

Copy link

@newradius newradius commented Mar 28, 2017

Really liked it, thank you!

@moghwan

This comment has been minimized.

Copy link

@moghwan moghwan commented May 21, 2017

works perfectly with symfony2, thanks guys !

@gdarquie

This comment has been minimized.

Copy link

@gdarquie gdarquie commented Jan 31, 2018

Thank you, very usefull :-)

@rifer

This comment has been minimized.

Copy link

@rifer rifer commented Mar 1, 2018

Hi, amazing work, thanks so much

I have an issue and may be someone could give me a hand with it; I can not make it work with multiple select. Actually, I am getting a different html rendered than the one is generated from the example in http://materializecss.com/forms.html
Any idea what could I doing wrong?

My select html:

<div class="select-wrapper">
  <input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-dd208459-f598-3e35-413d-5ae4925ae9d9">
  <ul id="select-options-dd208459-f598-3e35-413d-5ae4925ae9d9" class="dropdown-content select-dropdown multiple-select-dropdown" tabindex="0" style="">
      <li id="select-options-dd208459-f598-3e35-413d-5ae4925ae9d90" tabindex="0">
           <span>
              <label>
                    <input type="checkbox" "="">
                            <span>Option1</span>
                    </label>
               </span>
       </li>
 ....

Materializa example:

<li class="">
  <span>
    <input type="checkbox">
       <label>
       ::before
       ::after
       </label>
          Option 1
  </span>
</li>

Thanks in advance

@CocoCouq

This comment has been minimized.

Copy link

@CocoCouq CocoCouq commented Mar 21, 2020

Thank you so much. It still works very well today with Symfony 5. 👍

Only, now if you want a checkbox you have to open the label before the input.
I tried several things, without knowing too much about the twig and I propose to others my solution:

Just move this line :

<label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>

Above this line :

<input type="checkbox" class="filled-in"{{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />

And put the following line in a span :

{{ translation_domain is same as(false) ? label|raw : label|trans({}, translation_domain)|raw }}

Like :

<span>{{ translation_domain is same as(false) ? label|raw : label|trans({}, translation_domain)|raw }}</span>
@JusteLeblanc

This comment has been minimized.

Copy link
Owner Author

@JusteLeblanc JusteLeblanc commented Mar 23, 2020

Great to know that it still works well with Symfony 5! 😄

And many thanks for this solution to make checkboxes working.

@bernard-ng

This comment has been minimized.

Copy link

@bernard-ng bernard-ng commented Jul 6, 2020

hello, what about the input type file?

{% block file_widget -%}
    <{{ element|default('div') }} class="file-field input-field">
    <div class="btn">
        <span>{{ 'File' | trans }}</span>
        <input name="{{ form.vars.full_name }}"
               id="{{ form.vars.id }}"
               type="{{ form.vars.type }}"
                {{ form.vars.required ? 'required' : '' }}
        >
    </div>
    <div class="file-path-wrapper">
        <input
                class="file-path validate"
                type="text"
                {%- if attr.placeholder is defined and attr.placeholder is not none -%}
                    placeholder="{{ attr.placeholder | trans }}"
                {%- endif -%}
        >
    </div>
    </{{ element|default('div') }}>
{%- endblock %}
@toutvukantabu

This comment has been minimized.

Copy link

@toutvukantabu toutvukantabu commented Aug 27, 2020

hello, what about the input type file?

{% block file_widget -%}
    <{{ element|default('div') }} class="file-field input-field">
    <div class="btn">
        <span>{{ 'File' | trans }}</span>
        <input name="{{ form.vars.full_name }}"
               id="{{ form.vars.id }}"
               type="{{ form.vars.type }}"
                {{ form.vars.required ? 'required' : '' }}
        >
    </div>
    <div class="file-path-wrapper">
        <input
                class="file-path validate"
                type="text"
                {%- if attr.placeholder is defined and attr.placeholder is not none -%}
                    placeholder="{{ attr.placeholder | trans }}"
                {%- endif -%}
        >
    </div>
    </{{ element|default('div') }}>
{%- endblock %}

Thanks :)

@Signe93

This comment has been minimized.

Copy link

@Signe93 Signe93 commented Oct 26, 2020

Very nice Theme. I also tried to use it with my Symfony5 app, but I can't get the CountryType, BirthdayType and EntityType to work. Does anyone have a solution?

@toutvukantabu

This comment has been minimized.

Copy link

@toutvukantabu toutvukantabu commented Oct 26, 2020

Very nice Theme. I also tried to use it with my Symfony5 app, but I can't get the CountryType, BirthdayType and EntityType to work. Does anyone have a solution?

hello here is how I declare my birthday type in my form:
->add('birthdayDateUser', DateType::class,[
'label' => 'Date d'anniverssaire',
'widget' => 'single_text',
'html5' => false,
'required' => false,
'format'=> 'dd-mm-yyyy',
'attr' => [
'class'=> 'datepicker',
]
])

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment