twitter bootstrap - Symfony2 + Bootstrap3: customization of "block form_label" causes flipped form -
i wanted place icons links on right part of labels. it's 100% solved (read here full story)
in summary overrode block {%- block form_label -%}
in template follows (i added "added part" below):
{% extends "bootstrap_3_horizontal_layout.html.twig"%} {%- block form_label -%} {% if label not sameas(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 empty -%} {%- if label_format not empty -%} {% set label = label_format|replace({ '%name%': name, '%id%': id, }) %} {%- else -%} {% set label = name|humanize %} {%- endif -%} {%- endif -%} <label{% attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{{ label|trans({}, translation_domain) }} // start of added part {% if 'history' in label_attr.class %} <a data-toggle="modal" href="#{{historyurl}}"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></a> {% endif %} {% if 'help' in label_attr.class %} <a data-toggle="modal" href="#{{helpurl}}"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a> {% endif %} // end of added part </label> {%- endif -%} {%- endblock form_label -%}
everything works form flipped (labels on right).
this get:
i tried combinations of adding parent
here , there, causes duplication of labels.
i suspect that's because i'm overriding portion of form_div_layout.html.twig
gets later extended bootstrap_3_horizontal_layout.html.twig
, extend latter.
any hint on how solve it?
i'm using form template assigning @ global level in config.yml
# twig configuration twig: ... form_themes: ['form/form_errors.html.twig'] form: resources: ['form/mylayout.html.twig']
edit
partially solved don't solution, looking forward more elegant one. did was.
1) creating template uses form_div_layout.html.twig
adding label customization.
2) copy pasting bootstrap_3_layout.html.twig
changing first line make use 1)
3) copy pasting bootstrap_3_horizontal_layout.html.twig
changing first line make extend 2)
4) use 3) in form theme
a bit of overkill...other solutions more welcome!
seems lost few classes bootstrap , why markup broken. try 1 form_label block^
{% block form_label -%} {% spaceless %} {% set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' control-label ' ~ block('form_label_class'))|trim}) %} {% if label not sameas(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 empty -%} {%- if label_format not empty -%} {% set label = label_format|replace({ '%name%': name, '%id%': id, }) %} {%- else -%} {% set label = name|humanize %} {%- endif -%} {%- endif -%} <label{% attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}> {{ label|trans({}, translation_domain) }} // start of added part {% if 'history' in label_attr.class %} <a data-toggle="modal" href="#{{historyurl}}"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></a> {% endif %} {% if 'help' in label_attr.class %} <a data-toggle="modal" href="#{{helpurl}}"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a> {% endif %} // end of added part </label> {%- endif -%} {% endspaceless %} {%- endblock form_label %}
i've added first line set lost classes needed bootstrap:
{% set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' control-label ' ~ block('form_label_class'))|trim}) %}
Comments
Post a Comment