2012-10-09 8 views
11

Ich habe ein Bearbeitungsformular, das Formular wird durch symfony2 Formtypen gemacht. Ich habe die Dokumentation überprüft, konnte jedoch keine Option zum Hinzufügen von CSS zum Formular finden. Das Formular zeigt die Daten korrekt an und alles ist in Ordnung, was ich tun möchte, ist das Hinzufügen von Stilen zu jedem Feld.Hinzufügen von CSS zu Formulartyp ist Symfony2

Mein Typ bearbeiten ist

public function buildForm(FormBuilder $builder, array $options) 
{ 
    $builder 
    ->add('id', 'hidden') 
    ->add('patent_name', 'text', array('label' => 'Patent Name')) 
    ->add('description', 'textarea', array('label' => 'Description', 'required' => false)) 
    ->add('appln_auth','text', array('label' => 'Application Authorization')) 
    ; 
} 

Wer noch keine Idee ho hat ich CSS hinzufügen können?

Dank

+0

Es ist semantisch falsch, was Präsentation stuff (CSS-Stile hinzufügen , ...) zu Ihren FormTypes (Logik). Also tu das nicht, auch wenn das möglich ist – Trix

Antwort

15

Hier wird die Art und Weise ist, dass Sie es tun können, wenn Ihr Formular erstellen,

$builder->add('field_name', 'text', array('label' => 'Field Label', 'attr' => array('class' => 'fieldClass'))); 

Sie es auch tun können, wenn Ihre Formularfelder Rendering Schauen Sie sich Twig template form function reference an

{{ form_label(form.field, 'label', { 'attr': {'class': 'foo'} }) }} 
{{ form_widget(form.field, { 'attr': {'class': 'bar'} }) }} 

Anschließend können Sie eine CSS-Datei in Ihrem Paket enthalten öffentliches Vermögen hinzufügen und es in der Vorlage nennen verwenden,

{% block stylesheets %} 
    {% parent() %} {# if you want to keep base template's stylesheets #} 
    <link href="{{ asset('bundle/myBundle/css/stylesheet.css') }}" type="text/css" rel="stylesheet" /> 
{% endblock %} 

Sie haben dann Ihr öffentliches Vermögen über Ihren Web/Verzeichnis zugänglich zu machen. Der beste Weg, es zu tun ist, symbolische Links erstellen Sie Ihre Bündel öffentliches Vermögens Targeting, haben Sie dann

assets:install web/ --symlink 

Einen weiteren nützlichen Ansatz auszuführen, wenn Sie bestimmten Formularfeld-Rendering-Block (Zweig) gründlich anpassen wollen, ist Definieren Sie eine neue form theme, hier ist die Dokumentation>Form theming in Twig.

0

Dies könnte helfen:

$builder->add('patent_name', 'text', array('label' => 'Patent Name', 'attr' => array('class' => 'someclass'))); 
0

Wenn Sie Klasse Ihrem Felder hinzufügen möchten, müssen Sie attr spezielles Attribut verwenden, die mit Ihrem Build Form add Aktion auf diese Weise

$builder->add('field_name', 'yourType', array('attr' => array('class' => 'fieldClass'))); 

Wenn Sie stattdessen Ihre Stylesheet verknüpfen möchten, müssen Sie Verwenden Sie Vermögenswerte.
Sie können mehr über Vermögenswerte finden here

mit einem Vermögen arbeiten Sie tun müssen:

  • erstellen Sie Ihre CSS-Datei
  • installieren Ihr Vermögen mit assets:install (I --symlink Option verwenden vorschlagen, das wird reflect CSS-Änderungen, es sei denn, sie sind im Cache gespeichert)
  • Genießen Sie Ihr CSS, indem Sie es in Ihre Vorlage verwenden. Im Falle der Zweig haben Sie < link href="{{ asset('bundles/acmebundle/css/style.css') }}" type="text/css" rel="stylesheet"> tun (wo acmebundle ist dein Bündel)
Verwandte Themen