Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][SF2] FormBuilder + css + responsywność
Forum PHP.pl > Forum > Przedszkole
kosmos
Witam,
załóżmy że mam taki fragment kodu w kontrolerze

  1. $form = $this->createFormBuilder($message)
  2. ->add('name','text',array(
  3. 'label' => false,
  4. 'attr' =>
  5. 'placeholder' => 'Imię',
  6. 'style' => 'height: 8%; width: 300px',
  7. 'class' => 'myformclass')
  8. ))
  9. )


Dla pola formularza nadałem sobie odpowiednią wysokość oraz szerokość. Klasa myformclass określa mi wielkość czcionki w tym polu i nic więcej. Dostosowuj właśnie stronkę do różnych rozdzielczości (responsywność) i pojawił się problem, bo parametry pola formularza leżą w kontrolerze a nie w CSS. Spróbowałem więc zrobić coś takiego:

  1. $form = $this->createFormBuilder($message)
  2. ->add('name','text',array(
  3. 'label' => false,
  4. 'attr' =>
  5. 'placeholder' => 'Imię',
  6. 'class' => '#form .containerbox .containerleft .name')
  7. ))
  8. )


ale to nie działa. Czy w tym miejscu:
'
  1. class' => '#form .containerbox .containerleft .name'

mogę podawać tylko i wyłącznie nazwę klasy?


Forti
Chcesz mu nadać ID? Nie można ponieważ formbuilder automatycznie nadaje ID nazwa_formaluarza_nazwa_pola. Klasy dodajesz bez kropek z tego co pamiętam.

A jak wiemu ID jest jedno wink.gif
kosmos
Chcę zrobić coś takiego:

  1. #form .containerbox .containerleft .name{
  2. margin-left: 5%;
  3. height: 8%;
  4. width: 300px;
  5. }


  1. $form = $this->createFormBuilder($message)
  2. ->add('name','text',array(
  3. 'label' => false,
  4. 'attr' =>
  5. 'placeholder' => 'Imię',
  6. 'class' => '#form .containerbox .containerleft .name')
  7. ))
  8. )
kpt_lucek
@Forti ma racje - klasy oddzielasz spacjami, bez podawania kropek.
ID jest generowany automatycznie na podstawie:
nazwaformularza_nazwapola

Więc mając formularz:
UserRegister oraz pole username
wynikiem powinno być "userRegister_username", jest to też (o ile mnie pamięć nie myli) uzależnione od konfiguracji którą posiadasz (uderscore, camelcase etc).


--EDIT--

Dobrym przyzwyczajeniem jest nadawanie klas bezpośrednio w widoku, ewentualnie utworzenie form_theme -> Klik
Forti
Lucek ma racje.

Skoro zabierasz się za czołg o nazwie Symfony to rób to dobrze od A do Z wink.gif Nie kombinuj na około.
kpt_lucek
@Forti

Tu nie chodzi raczej o kombinowanie "na około", a o możliwości rozwojowe, wpisując parametry w obiekcie formularza ograniczamy znacznie naszą możliwość implementacyjną danego obiektu w wielu miejsach, przecież nikt nas nie zmusza do używania jednego obiektu formularza do obsługi logowania na wszystkich możliwych stronach naszego serwisu, ale skoro SF2 daje taką możliwość, to czemu tego nie użyć smile.gif?

Zwłaszcza że potem jest łatwiej tym manipulować, wchodząc do konkretnego widoku możesz zmienić X parametrów które wpłyną tylko na ten widok (i dziedziczące oczywiście), a pozostała część systemu zostaje w tej samej szacie graficznej.
Forti
Nie no, o to mi właśnie chodzi. Layout formularzy w twigu jest bardzo dobrą praktyką. Możemy wykorzystać wielokrotnie formularz z różnym widokiem etc.
kosmos
Koledzy jak wiecie bo czytacie i pomagacie mi od dłuższego czasu ... cały czas sięuczę smile.gif
Nie ogarnę tego od razu więc proszę o pomoc.
W widoku mam (fragment):

  1. <div id="form">
  2. <div class="headline">
  3. <div class="top"></div>
  4. <div class="bottom"><h1>...</h1></div>
  5. </div>
  6. <div class="containerbox">
  7. <div class="containerleft">
  8. <div class="frame">
  9. <h2>Formularz Kontaktowy</h2>
  10. <?php echo $view['form']->start($form) ?>
  11. <?php echo $view['form']->errors($form) ?>
  12. <div class="name"><?php echo $view['form']->row($form['name']) ?></div>
  13. <?php echo $view['form']->end($form) ?>
  14. </div>
  15. </div>
  16. </div>
  17. </div>


W kontrolerze (fragment):
  1. public function contactAction(Request $request)
  2. {
  3. $message = new Message();
  4.  
  5. $form = $this->createFormBuilder($message)
  6. ->add('name','text',array(
  7. 'label' => false,
  8. 'attr' =>
  9. 'placeholder' => 'Imię',
  10. 'style' => 'height: 8%; width: 300px',
  11. 'class' => 'myformclass')
  12. ))
  13.  
  14. ->add('wyślij','submit', array(
  15. 'label' => false,
  16. 'attr' =>
  17. 'class' => 'btn-form-style',
  18. 'style' => 'height: 30px; margin-left: 280px'
  19. )
  20. ))
  21. ->getForm();



i teraz style które określiłem dla obiektu w kontrolerze (wysokość, szerokość), chciałbym zupełnie przenieść do CSS`a. Jak to zrobić? Mógłbym prosić o przykład w oparciu o mój kod?

Forti
  1. 'class' => 'btn-form-style you_class',


i w css:

you_class {
..//
}


przecież to podstawy css a nie symfony wink.gif
kpt_lucek
1. Wywal formularz do osobnego pliku O tak (mniej kopiowania kodu, więcej możliwości)
2. Klasy nadawaj Tak -> 3ci przykład (używasz PHP do templatek, więc kliknij w tabie)
3. Nadaj (jeżeli musisz) nazwę formularza zgodnie z tym:
  1. public function getName()
  2. {
  3. //form będzie miał parametr id="task"
  4. //wszystkie pod elementy będą miały parametr id="task_{nazwa elementu}"
  5. return 'task';
  6. }

4. Ja używam Twig'a smile.gif

---EDIT---

Nie wstawiaj do formularza buttonów submit (też dobra praktyka smile.gif ) a rób to ręcznie w templatce pomiędzy tagami formularza (łatwiej się wtedy rozbudowuje, czy zagnieżdża formularz w innym formularzu).

---EDIT #2---

Odnośnie form theme, zobacz jak jest TO budowane, pod bootstrap3.
kosmos
Zrobiłem tak jak mi wskazałeś ale coś jest nie tak bo wali błędem:
  1. Warning: Illegal offset type in isset or empty in C:\xampp\htdocs\symfony\app\cache\dev\classes.php line 3032


Klasa z formularzem
  1. <?php
  2. // src/Acme/PageBundle/Form/Type/ContactType.php
  3. namespace Acme\PageBundle\Form\Type;
  4.  
  5. use Symfony\Component\Form\AbstractType;
  6. use Symfony\Component\Form\FormBuilderInterface;
  7.  
  8. class ContactType extends AbstractType
  9. {
  10. public function buildForm(FormBuilderInterface $builder, array $options)
  11. {
  12. $builder
  13. ->add('name','text',array('label' => 'name'))
  14. ->add('surname','text')
  15. ->add('email','email')
  16. ->add('subject','text')
  17. ->add('note','textarea');
  18. }
  19.  
  20. public function getName()
  21. {
  22. return 'name';
  23. }
  24.  
  25. public function getSurname()
  26. {
  27. return 'surname';
  28. }
  29.  
  30. public function getEmail()
  31. {
  32. return 'email';
  33. }
  34.  
  35. public function getSubject()
  36. {
  37. return 'subject';
  38. }
  39.  
  40. public function getNote()
  41. {
  42. return 'note';
  43. }
  44. }


Widok
  1. <div class="name"><?php echo $view[$form]->label($form['name'], array(
  2. 'attr' => array(
  3. 'placeholder' => 'Imię',
  4. 'class' => 'myformclass'),
  5. )) ?>
  6. </div>

kpt_lucek
A jak wygląda wywołanie w controllerze?
kosmos
  1. public function contactAction(Request $request)
  2. {
  3.  
  4. $message = new Message();
  5. $form = $this->createForm(new ContactType(),$message);
  6. 'form' => $form->createView(),
  7. ));
  8.  
  9. }


Coś jest nie tak w widoku bo jak wróce do starego wywołania:

  1. <div class="name"><?php echo $view['form']->row($form['name']) ?></div>


To jest OK
kpt_lucek
  1. public function setDefaultOptions(OptionsResolverInterface $resolver)
  2. {
  3. $resolver->setDefaults(array(
  4. 'data_class' => 'AppBundle\Entity\Message',
  5. ));
  6. }
kosmos
Nie tu jest ok.
miałem nadmiarowy przecinek w widoku tongue.gif smile.gif

Czyli teraz aby odwołać się do CSSa do tej linijki:

  1. #form .containerbox .containerleft .name{
  2. }


powinienem zrobić to tak?


  1. <div class="name">
  2. <?php echo $view['form']->row($form['surname'],array(
  3. 'attr' => array('class' => 'form containerbox containerleft name',
  4. 'placeholder' => 'Imię'),
  5. )) ?>
  6. </div>


Tego nie mogę zrozumieć ....
kpt_lucek
Css nie ma nic do widoku smile.gif

uruchom stronę bez nadawania klas, zobacz jak wygląda nadawanie ID. Potem sprawdź co i gdzie powinieneś dodać a powinno się rozjaśnić.

Cytat(kosmos @ 11.04.2015, 16:58:28 ) *
[...]
  1. <?php
  2. // src/Acme/PageBundle/Form/Type/ContactType.php
  3. namespace Acme\PageBundle\Form\Type;
  4.  
  5. use Symfony\Component\Form\AbstractType;
  6. use Symfony\Component\Form\FormBuilderInterface;
  7.  
  8. class ContactType extends AbstractType
  9. {
  10. public function buildForm(FormBuilderInterface $builder, array $options)
  11. {
  12. $builder
  13. ->add('name','text',array('label' => 'name'))
  14. ->add('surname','text')
  15. ->add('email','email')
  16. ->add('subject','text')
  17. ->add('note','textarea');
  18. }
  19.  
  20. public function getName()
  21. {
  22. return 'name';
  23. }
  24.  
  25. public function getSurname()
  26. {
  27. return 'surname';
  28. }
  29.  
  30. public function getEmail()
  31. {
  32. return 'email';
  33. }
  34.  
  35. public function getSubject()
  36. {
  37. return 'subject';
  38. }
  39.  
  40. public function getNote()
  41. {
  42. return 'note';
  43. }
  44. }

[...]


getName tyczyło się do pobrania nazwy formularza, reszta jest zbędna smile.gif
kosmos
Teraz to dopiero mam zabawę ze stylami .... nie słuchają mnie się smile.gif

kpt_lucek
Wszystko zależy od tego co i jak robisz, pamiętaj że nie wszystko zrobisz przez formularz smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.