Symfony2 - Как поставить метку и ввести флажки/радиостанции в одной строке?
В моей форме у меня есть некоторые флажки,
но по умолчанию У меня:
- первый виджет радио
- первая метка
- второй виджет радио
- ярлык
Вот код html, сгенерированный SYmfony2:
<div>
<input ...>
<label ...></label>
<input ...>
<label ...></label>
</div>
Что мне нужно Я хочу:
первый радиовизор первого ярлыка
второй радиовизор - вторая метка
Код html будет выглядеть следующим образом:
<label .....><input ....></label>
Я думаю, что я должен переопределить choice_widget, но не знаю, как помещать ввод и метку в одну строку
Вот выбор_widget, который может потребоваться переопределить:
{% block choice_widget %}
{% spaceless %}
{% if expanded %}
<div {{ block('widget_container_attributes') }}>
{% for child in form %}
{{ form_widget(child) }} {{ form_label(child) }}
{% endfor %}
</div>
{% else %}
<select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
{% if empty_value is not none %}
<option value="">{{ empty_value|trans }}</option>
{% endif %}
{% if preferred_choices|length > 0 %}
{% set options = preferred_choices %}
{{ block('widget_choice_options') }}
{% if choices|length > 0 and separator is not none %}
<option disabled="disabled">{{ separator }}</option>
{% endif %}
{% endif %}
{% set options = choices %}
{{ block('widget_choice_options') }}
</select>
{% endif %}
{% endspaceless %}
{% endblock choice_widget %}
Ответы
Ответ 1
У меня была та же проблема, и я не смог найти решение, поэтому сам отработал. Вы правы, что вам нужно переопределить блок {% block choice_widget %}
. Первый шаг - удалить строку {{ form_label(child) }}
из раздела {% if expanded %}
, которая выводит отдельную метку.
{% block choice_widget %}
{% spaceless %}
{% if expanded %}
<div {{ block('widget_container_attributes') }}>
{% for child in form %}
{{ form_widget(child) }}
{# {{ form_label(child) }} <--------------------- remove this line #}
{% endfor %}
</div>
{% else %}
<select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
{% if empty_value is not none %}
<option value="">{{ empty_value|trans }}</option>
{% endif %}
{% if preferred_choices|length > 0 %}
{% set options = preferred_choices %}
{{ block('widget_choice_options') }}
{% if choices|length > 0 and separator is not none %}
<option disabled="disabled">{{ separator }}</option>
{% endif %}
{% endif %}
{% set options = choices %}
{{ block('widget_choice_options') }}
</select>
{% endif %}
{% endspaceless %}
{% endblock choice_widget %}
Теперь вам просто нужно обработать печать метки в блоке {% block checkbox_widget %}
.
{% block checkbox_widget %}
{% spaceless %}
<label for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock checkbox_widget %}
Вам нужно будет сделать то же самое для {% block radio_widget %}
, так как в противном случае теперь не будет метки.
{% block radio_widget %}
{% spaceless %}
<label for="{{ id }}"><input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock radio_widget %}
Ответ 2
С помощью Альберто Гаона и Джеймса, Symfony 2.4 правильное решение для интеграции BS3 radio AND checkbox выглядит следующим образом:
По вашему мнению у вас есть:
{% form_theme form 'AcmeDemoBundle:Form:fields.html.twig' %}
// A radio or checkbox input
{{ form_widget(form.example) }}
Затем в вашем файле fields.html.twig(который переопределяет https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig, см. http://symfony.com/doc/current/cookbook/form/form_customization.html)
{# src/Acme/DemoBundle/Resources/views/Form/fields.html.twig #}
{% block choice_widget_expanded %}
{% spaceless %}
<div {{ block('widget_container_attributes') }}>
{% for child in form %}
{% if multiple %}
<div class="checkbox">
{% else %}
<div class="radio">
{% endif %}
{{ form_widget(child) }}
</div>
{% endfor %}
</div>
{% endspaceless %}
{% endblock choice_widget_expanded %}
{% block checkbox_widget %}
{% spaceless %}
{% if label is empty %}
{% set label = name|humanize %}
{% endif %}
<label for="{{ id }}">
<input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans({}, translation_domain) }}
</label>
{% endspaceless %}
{% endblock checkbox_widget %}
{% block radio_widget %}
{% spaceless %}
{% if label is empty %}
{% set label = name|humanize %}
{% endif %}
<label for="{{ id }}">
<input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans({}, translation_domain) }}
</label>
{% endspaceless %}
{% endblock radio_widget %}
Ответ 3
ПРИМЕЧАНИЕ. Обновленное решение Bob F для Symfony 2.3 (см. https://github.com/symfony/symfony/blob/2.3/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig):
Переопределить choice_widget_expanded:
{% block choice_widget_expanded %}
{% spaceless %}
<div {{ block('widget_container_attributes') }}>
{% for child in form %}
{{ form_widget(child) }}
{% endfor %}
</div>
{% endspaceless %}
{% endblock choice_widget_expanded %}
Переопределить флажок (стиль начальной загрузки):
{% block checkbox_widget %}
{% spaceless %}
<label for="{{ id }}" class="checkbox {% if checked %}checked{% endif %}" ><span class="icons"><span class="first-icon fui-checkbox-unchecked"></span><span class="second-icon fui-checkbox-checked"></span></span><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock checkbox_widget %}
Отменить радиообъектив
{% block radio_widget %}
{% spaceless %}
<label for="{{ id }}"><input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock radio_widget %}
Ответ 4
Ввод ввода формы внутри тега метки приведет к поломке HTML.
Какую цель вы ставите? Если вы просто хотите сделать ярлык и ввод в одной строке в браузере, вы можете использовать css:
input, label {
display: inline;
}
Ответ 5
Когда метка отображается, она будет включать атрибут for
- это связывает label
с input
- см. документы на label
здесь изменение вывода на то, что вы предложили, является еще одним способом связывания label
и input
Если вы хотите, чтобы метка отображалась слева от ввода, вам нужно изменить свой шаблон на:
{% for child in form %}
<div>
{{ form_label(child) }} {{ form_widget(child) }}
</div>
{% endfor %}
Что делает label
до input
, а затем создает следующий вывод
<div>
<div>
<label ...></label>
<input ...>
</div>
<div>
<label ...></label>
<input ...>
</div>
</div>
Затем вы можете применить стиль CSS, чтобы он отображался в строке:
div label {
display: inline-block;
width: 200px;
}
По умолчанию - без CSS label
будет выстраиваться в линию до input
с помощью этого макета HTML, но inline-block
позволяет также использовать атрибут width
, чтобы обеспечить правильное выравнивание всех полей - независимо от длины текста ярлыка
Рабочий пример здесь
Ответ 6
В Symfony 2.4 это работает не так, как ожидалось.
{% block checkbox_widget %}
{% spaceless %}
<label for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock checkbox_widget %}
... ярлык недоступен. Вам необходимо добавить следующее:
{% if label is empty %}
{% set label = name|humanize %}
{% endif %}
Итак, полное решение:
{% block checkbox_widget %}
{% if label is empty %}
{% set label = name|humanize %}
{% endif %}
{% spaceless %}
<label for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock checkbox_widget %}
Ответ 7
Ярлык довольно тривиальный, поэтому я лично предпочитаю его вручную.
Быстро и грязно в твоей веточке:
<label for="field">
{{ form_widget(form.field) }} Field Label
</label>
Мне бы понравилось, если бы у Symfony было более простое решение для этого, но что бы там ни было.
Конечно, вышеупомянутые ответы, возможно, более элегантны, а что нет.;)
Ответ 8
Вы можете переопределить такую функцию form_row (измененную, чтобы она соответствовала метке храма/флажку загрузочного буфера twitter):
(в этом примере это "флажок", но я думаю, что "радио" работает одинаково)
{% extends 'form_div_layout.html.twig' %}
{% block field_row %}
{% spaceless %}
{% if 'checkbox' in types %}
{% 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 %}
{% set label = name|humanize %}
{% endif %}
<label class="checkbox" {% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{{ label|trans({}, translation_domain) }}
{{ block('checkbox_widget') }}
</label>
{% else %}
{{ parent() }}
{% endif %}
{% endspaceless %}
{% endblock field_row %}