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
Post a Comment