symfony - What is the difference between widget_attributes and widget_container_attributes? -


ok, bad question since semantically think can gather difference block names themselves. real question how can control attributes appear container , element when widget_attributes , widget_containter_attributes required on given element.

consider following:

<div class="ui-select foo bar baz">     <select id="abc_hello_worldtype_name" name="abc_hello_worldtype[name]" class="thud grunt">         ...     </select> </div> 

main things i'm going after having set class names on both div , select. required both style reasons behavior-related requirements.

the main thing confusing me both original widget_attributes , widget_container_attributes both use attr variable passed in. these not intended used together?


i found myself doing following today; making own blocks copied originals , adding conditionals. seems way complicated. know i'm doing wrong.

{% block choice_widget_collapsed %} {% spaceless %}     {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ui-select')|trim}) %}     <div {{ block('ui_select_container_attributes') }}>         <select {{ block('ui_select_widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>             {% if empty_value not none %}                 <option value=""{% if required %} disabled="disabled"{% if value empty %} selected="selected"{% endif %}{% endif %}>{{ empty_value|trans({}, translation_domain) }}</option>             {% endif %}             {% if preferred_choices|length > 0 %}                 {% set options = preferred_choices %}                 {{ block('choice_widget_options') }}                 {% if choices|length > 0 , separator not none %}                     <option disabled="disabled">{{ separator }}</option>                 {% endif %}             {% endif %}             {% set options = choices %}             {{ block('choice_widget_options') }}         </select>     </div> {% endspaceless %} {% endblock choice_widget_collapsed %} 

notice ui_* block references on div , select. blocks like:

{% block ui_select_widget_attributes %} {% spaceless %}     id="{{ id }}" name="{{ full_name }}"{% if read_only %} readonly="readonly"{% endif %}{% if disabled %} disabled="disabled"{% endif %}{% if required %} required="required"{% endif %}{% if max_length %} maxlength="{{ max_length }}"{% endif %}{% if pattern %} pattern="{{ pattern }}"{% endif %}     {% attrname, attrvalue in attr %}{% if attrname in ['placeholder', 'title'] %}{{ attrname }}="{{ attrvalue|trans({}, translation_domain) }}" {% elseif attrname == 'class' %} class="foopa {{ attrvalue|replace({'ui-select':''}) }}" {% else %}{{ attrname }}="{{ attrvalue }}" {% endif %}     {% endfor %} {% endspaceless %} {% endblock ui_select_widget_attributes %}  {% block ui_select_container_attributes %} {% spaceless %}     {% if id not empty %}id="{{ id }}" {% endif %}     {% attrname, attrvalue in attr %}{{ attrname }}="{{ attrvalue }}" {% endfor %} {% endspaceless %} {% endblock ui_select_container_attributes %} 

when form field rendered single form input (text input, select, checkbox...), widget_attributes used. when rendered collection of inputs (form, multiple checkboxes, multiple inputs, ...), widget_container_attributes used container surrounding inputs (a div, mostly). no, not intended used @ same time.

the difference between 2 blocks widget_attributes renders form-specific attributes ("value", "name"...) while widget_container_attributes renders generic html attributes.

if want add additional markup beyond possibilities of "attr" option, best bet copy corresponding block form theme (e.g. "choice_widget_collapsed"), paste template, rename block match element's id leading underscore ("_") , "widget" suffix (e.g. if element's id "form_my_element", block called "_form_my_element_widget") , modify markup in template.

{% block body %} ... {{ form(form) }} ... {% endblock %}  {% block _form_my_element_widget %} ... modified version of "choice_widget_collapsed" markup ... {% endblock %} 

Comments

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -