Ankündigung

Einklappen
Keine Ankündigung bisher.

Symfony / Bootstrap und Formulare

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Symfony / Bootstrap und Formulare

    Hallo zusammen,

    ich stecke mal wieder fest und könnte den einen oder anderen Tipp gebrauchen.
    Ich möchte ein Formular erstellen und dieses optisch so gestalten das manche Form Elemente nebeneinander sind.

    Das Formular funktioniert an sich sehr gut bisher. Es schaut halt nur ... aus.

    Gearbeitet wird mit Boostrap4 und Symfony 4.1.
    Es wird die Twig Vorlage "bootstrap_4_horizontal_layout.html.twig" verwendet.

    Mal etwas Code:

    PHP-Code:
    <?php

    namespace App\Form;

    use 
    App\Entity\Person;
    use 
    Symfony\Component\Form\AbstractType;
    use 
    Symfony\Component\Form\Extension\Core\Type\ChoiceType;
    use 
    Symfony\Component\Form\Extension\Core\Type\FormType;
    use 
    Symfony\Component\Form\Extension\Core\Type\TextType;
    use 
    Symfony\Component\Form\FormBuilderInterface;
    use 
    Symfony\Component\OptionsResolver\OptionsResolver;
    use 
    Symfony\Component\Form\Extension\Core\Type\CollectionType;

    class 
    PersonType extends AbstractType
    {
        public function 
    buildForm(FormBuilderInterface $builder, array $options)
        {
            
    $builder
                
    ->add('salutation'ChoiceType::class, array(
                    
    'choices' => array(
                        
    Person::SALUTATION_MR => Person::SALUTATION_MR,
                        
    Person::SALUTATION_MRS => Person::SALUTATION_MRS
                    
    )
                ))
                ->
    add('gender'ChoiceType::class, array(
                    
    'choices' => array(
                        
    Person::GENDER_FEMALE => Person::GENDER_FEMALE,
                        
    Person::GENDER_MALE => Person::GENDER_MALE,
                    )
                ))
                ->
    add($builder->create('name_group'FormType::class, array('by_reference' => true))
                    ->
    add('name')
                    ->
    add('prename')
                )
                ->
    add('addresses'AddressType::class, array(
                    
    'mapped' => false
                
    ))
                ->
    add('user'UserType::class)
            ;
        }

        public function 
    configureOptions(OptionsResolver $resolver)
        {
            
    $resolver->setDefaults([
                
    'data_class' => Person::class,
            ]);
        }
    }
    HTML-Code:
    <div class="form-group row">
        <legend class="col-form-label col-sm-2 col-form-label required">Name group</legend>
        <div class="col-sm-10">
            <div id="staff_person_name_group">
                <div class="form-group row"><label class="col-form-label col-sm-2 form-control-label required"
                                                   for="staff_person_name_group_name">Name</label>
                    <div class="col-sm-10"><input type="text" id="staff_person_name_group_name"
                                                  name="staff[person][name_group][name]" required="required"
                                                  class="form-control" data-cip-id="staff_person_name_group_name"></div>
                </div>
                <div class="form-group row"><label class="col-form-label col-sm-2 form-control-label required"
                                                   for="staff_person_name_group_prename">Prename</label>
                    <div class="col-sm-10"><input type="text" id="staff_person_name_group_prename"
                                                  name="staff[person][name_group][prename]" required="required"
                                                  class="form-control" data-cip-id="staff_person_name_group_prename"></div>
                </div>
            </div>
        </div>
    </div>
    Laut Doku von Bootstrap müsste es ungefähr so aussehen:

    HTML-Code:
    <div class="row">
        <div class="col">
        <input type="text" class="form-control" placeholder="First name">
        </div>      
        <div class="col">
        <input type="text" class="form-control" placeholder="Last name">
        </div>
    </div>
    Ich möchte den legend ganz weg haben und dafür sorgen, dass die Elemente in einem div sind mit der klasse "row" und die nebeneinander zu bekommen.
    Leider bin ich mir nicht sicher, ob ich mit dem eingeschlagenen Weg den richtigen gewählt habe?

    Dazu wundert es mich, dass die Twig Vorlage für Bootstrap das nicht von haus aus kann. Diese wird aber verwendet.


  • #2
    https://symfony.com/doc/master/form/bootstrap4.html
    https://symfony.com/doc/master/form/...omization.html

    Kommentar


    • #3
      Die beiden Links sind mir bekannt. Die Vorlagen zu überschreiben ist natürlich immer eine Möglichkeit.

      Aber warum liefert die Bootstrap Vorlage, kein passendes Bootstrap4 HTML?
      Oder ist mein Weg eine Gruppe von zwei Elementen zu erstellen der falsche?

      Kommentar


      • #4
        Sorry, aber der so gepostete Code sagt jedenfalls mir nicht sooo zu.
        entweder einrücken oder besser eingerücktes diff posten.

        Was $builder ist ?
        was builder->add(builder->create(...)) werden soll
        ich find da so auf die schnelle nicht in der Docu.

        Ich möchte den legend ganz weg haben und dafür sorgen, dass die Elemente in einem div sind mit der klasse "row" und die nebeneinander zu bekommen.
        Schön...

        Kommentar


        • #5
          Ja die Formatierung war misst. Keine Ahnung warum, aber beim Kopieren aus PHPStorm zerlegt es im Forum immer die Zeilenumbrüche.
          Warum auch immer.

          Ich habe den PHP Coder erweitert, so das zu sehen ist, was $builder ist. Mein Gedanke war halt nicht zu viel Code zu Posten, weil das liest auch niemand.
          Es gibt Twig Vorlagen ( Sehr viel Code ) für Bootstrap, die werden auch verwendet. Erzeugen aber das oben stehende HTML Gerüst.

          So wie ich das sehe, brauch es eine Formular Template für eine Gruppe.
          Und da komme ich wieder zu der Ausgangsfrage:
          Ist das Gruppieren von Elemente wie ich es gemacht habe richtig?
          Einen anderen weg habe ich bisher nicht gefunden.

          Eigentlich ist ja das Template dafür verantwortlich, wie was ausschaut.

          Ich denke ich muss mir einen Twig block bauen, der dann eine Gruppe rendert.



          Kommentar


          • #6
            Es gibt Twig Vorlagen ( Sehr viel Code ) für Bootstrap, die werden auch verwendet. Erzeugen aber das oben stehende HTML Gerüst.
            Du rendert nur name/prename und weder Gender noch adress noch sonstwas ?
            wieso das ->add($builder-.>create()) -- siehe oben ...

            Kommentar


            • #7
              Zitat von tomBuilder Beitrag anzeigen

              Du rendert nur name/prename und weder Gender noch adress noch sonstwas ?
              wieso das ->add($builder-.>create()) -- siehe oben ...
              Wie kommst du da drauf, dass ich nur name/prename rendere?
              Für meine Frage sind alle anderen Formular Elemente uninteressant.

              ->add($builder-.>create()) habe ich verwendet, weil ich dachte dass dies der Weg sei zwei Elemente zu "gruppieren". Irgendwo gelesen, finde den Link aber jetzt gerade nicht mehr.
              https://symfony.com/doc/current/reference/forms/types/form.html


              Nehmen wir das create mal raus:
              PHP-Code:
                ->add('name')
              ->
              add('prename'

              Ein wenig Twig
              HTML-Code:
              {{ form_start(form) }}
              {{ form_errors ( form ) }}
              {{ form_row ( form.person.name ) }}
              {{ form_row ( form.person.prename ) }}
              {{ form_end(form) }}
              Ergebnis:
              HTML-Code:
              <div class="form-group row"><label class="col-form-label col-sm-2 form-control-label required" for="staff_person_name">Name</label>
                  <div class="col-sm-10"><input type="text" id="staff_person_name" name="staff[person][name]" required="required"
                                                maxlength="50" class="form-control"/></div>
              </div>
              <div class="form-group row"><label class="col-form-label col-sm-2 form-control-label required"
                                                 for="staff_person_prename">Prename</label>
                  <div class="col-sm-10"><input type="text" id="staff_person_prename" name="staff[person][prename]"
                                                required="required" maxlength="50" class="form-control"/></div>
              </div>
              So und jetzt möchte ich die beiden Elemente Nebeneinander haben.
              Was wäre dein weg?

              Ein Weg wäre wohl ( Nicht perfekt, aber ein Anfang )
              HTML-Code:
              <div class="form-row">
                          <div class="form-group col-md-6">
                          {{ form_label(form.person.name) }}
                          {{ form_widget(form.person.name) }}
                          </div>
                          <div class="form-group col-md-6">
                          {{ form_label(form.person.prename) }}
                          {{ form_widget(form.person.prename) }}
                          </div>
                      </div>

              Kommentar


              • #8
                Zitat von Creator Beitrag anzeigen

                Wie kommst du da drauf, dass ich nur name/prename rendere?
                Weil du mehr nicht geposted hast und oich Dein Problem nicht vertsand.

                Zitat von Creator Beitrag anzeigen
                ->add($builder-.>create()) habe ich verwendet, weil ich dachte dass dies der Weg sei zwei Elemente zu "gruppieren". Irgendwo gelesen, finde den Link aber jetzt gerade nicht mehr.
                https://symfony.com/doc/current/reference/forms/types/form.html
                ja tut es, inaltlich gruppieren.
                Di will st eine Gruppierung im Layout (grid) glaube ich verstanden zu haben.

                Zitat von Creator Beitrag anzeigen


                So und jetzt möchte ich die beiden Elemente Nebeneinander haben.
                Was wäre dein weg?

                Ein Weg wäre wohl ( Nicht perfekt, aber ein Anfang )
                HTML-Code:
                <div class="form-row">
                <div class="form-group col-md-6">
                {{ form_label(form.person.name) }}
                {{ form_widget(form.person.name) }}
                </div>
                <div class="form-group col-md-6">
                {{ form_label(form.person.prename) }}
                {{ form_widget(form.person.prename) }}
                </div>
                </div>
                Man kann ja noch mal in der Docu nachscahuen, aaber ich halte den Weg für gangbar.
                Also ja so würde ich es machen, deswegen auch die Links oben.

                https://getbootstrap.com/docs/3.3/examples/grid/

                Dann noch responsive und schauen, wie man was auslagern kann um das grid auch mal so zu benutzen, aber ja, ist doch ok.

                Scheint mir aber auch möglich eine CSS Classe an den Builder mitzugeben:

                http://symfony.com/doc/current/form/...llections.html

                Kommentar

                Lädt...
                X