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:
Laut Doku von Bootstrap müsste es ungefähr so aussehen:
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.
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>
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>
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.
Kommentar