2016-04-08 12 views
0

Ich verwende die neuen integrierten Bootstrap-Stile in einer Symfony3-Anwendung.Symfony3 Using Bootstrap Set Form Label/Widget Widths

twig: 
    debug:   "%kernel.debug%" 
    strict_variables: "%kernel.debug%" 
    form_themes: 
      - bootstrap_3_horizontal_layout.html.twig 

Ich verwende dies, um ein Formular mit seinen Komponenten (Label und Widget) zu rendern.
Alle Beschriftungen haben eine Klasse für die Breite von col-xs-2 und die Widgets-Klasse für die Breite ist col-xs-10.

<div class="form-group"> 
    {{ form_label(form.name) }} 
    <div class="col-md-9"> 
     {{ form_widget(form.name) }} 
    </div> 
    <div class="col-md-offset-3 col-md-9"> 
     {{ form_errors(form.name) }} 
    </div> 
</div> 

Wie kann ich einstellen (entweder global auf alle Formen oder auf einem form_row, oder an jeder Komponente, zB form_label/form_widget) der Klasse zu verwenden. Ich habe versucht, die Klasse hinzuzufügen, aber dies fügt nur die vorhandene Klasse hinzu und ersetzt sie nicht.

{{ form_label(form.name, 'gfdg', {'label_attr': {'class': 'col-md-3'} }) }} 

Welche class="col-xs-2 col-md-3"

Antwort

1

Ich weiß, dass dies eine alte Frage, aber dies könnte jemand in der Zukunft helfen.

Wenn Sie es einrichten global, einfach einen Zweig Datei für form/bootstrapCols.html.twig Beispiel erstellen, und fügen Sie diese zwei Blöcke:

{% block form_label_class -%} 
col-sm-2 
{%- endblock form_label_class %} 

{% block form_group_class -%} 
col-sm-10 
{%- endblock form_group_class %} 

Auf diese Weise können die Blöcke innerhalb bootstrap_3_horizontal_layout.html.twig außer Kraft gesetzt werden. Ändern col-sm-2 und col-sm-10, was auch immer Sie brauchen, und Update-Konfigurationsdatei mit zusätzlichen Formular Thema wie folgt aus:

twig: 
    debug:   "%kernel.debug%" 
    strict_variables: "%kernel.debug%" 
    form_themes: ['bootstrap_3_horizontal_layout.html.twig','form/bootstrapCols.html.twig'] 

Wenn Sie col- wollen nur für eine Ansicht ändern, dann einfach in Ihrem Zweig View-Datei verwenden diese:

{% form_theme formname with ['bootstrap_3_horizontal_layout.html.twig', _self] %} 

und fügen Sie Blöcke form_label_class und form_group_class in der gleichen Datei mit Klassen, die Sie benötigen.