Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][SF2] FormBuilder + css + responsywność
kosmos
post 11.04.2015, 14:00:33
Post #1





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----


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?


Go to the top of the page
+Quote Post
Forti
post 11.04.2015, 14:20:39
Post #2





Grupa: Zarejestrowani
Postów: 655
Pomógł: 73
Dołączył: 2.05.2014

Ostrzeżenie: (0%)
-----


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

Ten post edytował Forti 11.04.2015, 14:21:03


--------------------
Overwatch24 - najbardziej zaawansowany Polski portal Overwatch od fanów dla fanów.

Fachowo.co

Behance.net/fachowo
Go to the top of the page
+Quote Post
kosmos
post 11.04.2015, 14:28:04
Post #3





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----


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. )


Ten post edytował kosmos 11.04.2015, 14:28:16
Go to the top of the page
+Quote Post
kpt_lucek
post 11.04.2015, 14:28:57
Post #4





Grupa: Zarejestrowani
Postów: 428
Pomógł: 77
Dołączył: 10.07.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


@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

Ten post edytował kpt_lucek 11.04.2015, 14:30:16


--------------------


Cytat
There is a Bundle for that
Lukas Kahwe Smith - October 31th, 2014
Go to the top of the page
+Quote Post
Forti
post 11.04.2015, 14:31:58
Post #5





Grupa: Zarejestrowani
Postów: 655
Pomógł: 73
Dołączył: 2.05.2014

Ostrzeżenie: (0%)
-----


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.


--------------------
Overwatch24 - najbardziej zaawansowany Polski portal Overwatch od fanów dla fanów.

Fachowo.co

Behance.net/fachowo
Go to the top of the page
+Quote Post
kpt_lucek
post 11.04.2015, 14:41:39
Post #6





Grupa: Zarejestrowani
Postów: 428
Pomógł: 77
Dołączył: 10.07.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


@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.


--------------------


Cytat
There is a Bundle for that
Lukas Kahwe Smith - October 31th, 2014
Go to the top of the page
+Quote Post
Forti
post 11.04.2015, 14:43:50
Post #7





Grupa: Zarejestrowani
Postów: 655
Pomógł: 73
Dołączył: 2.05.2014

Ostrzeżenie: (0%)
-----


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.


--------------------
Overwatch24 - najbardziej zaawansowany Polski portal Overwatch od fanów dla fanów.

Fachowo.co

Behance.net/fachowo
Go to the top of the page
+Quote Post
kosmos
post 11.04.2015, 14:50:57
Post #8





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----


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?

Go to the top of the page
+Quote Post
Forti
post 11.04.2015, 14:53:07
Post #9





Grupa: Zarejestrowani
Postów: 655
Pomógł: 73
Dołączył: 2.05.2014

Ostrzeżenie: (0%)
-----


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


i w css:

you_class {
..//
}


przecież to podstawy css a nie symfony wink.gif


--------------------
Overwatch24 - najbardziej zaawansowany Polski portal Overwatch od fanów dla fanów.

Fachowo.co

Behance.net/fachowo
Go to the top of the page
+Quote Post
kpt_lucek
post 11.04.2015, 15:04:25
Post #10





Grupa: Zarejestrowani
Postów: 428
Pomógł: 77
Dołączył: 10.07.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


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.


--------------------


Cytat
There is a Bundle for that
Lukas Kahwe Smith - October 31th, 2014
Go to the top of the page
+Quote Post
kosmos
post 11.04.2015, 15:58:28
Post #11





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----


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>

Go to the top of the page
+Quote Post
kpt_lucek
post 11.04.2015, 16:04:25
Post #12





Grupa: Zarejestrowani
Postów: 428
Pomógł: 77
Dołączył: 10.07.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


A jak wygląda wywołanie w controllerze?

Ten post edytował kpt_lucek 11.04.2015, 16:04:46


--------------------


Cytat
There is a Bundle for that
Lukas Kahwe Smith - October 31th, 2014
Go to the top of the page
+Quote Post
kosmos
post 11.04.2015, 16:05:56
Post #13





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----


  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

Ten post edytował kosmos 11.04.2015, 16:11:26
Go to the top of the page
+Quote Post
kpt_lucek
post 11.04.2015, 16:13:19
Post #14





Grupa: Zarejestrowani
Postów: 428
Pomógł: 77
Dołączył: 10.07.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


  1. public function setDefaultOptions(OptionsResolverInterface $resolver)
  2. {
  3. $resolver->setDefaults(array(
  4. 'data_class' => 'AppBundle\Entity\Message',
  5. ));
  6. }


--------------------


Cytat
There is a Bundle for that
Lukas Kahwe Smith - October 31th, 2014
Go to the top of the page
+Quote Post
kosmos
post 11.04.2015, 16:19:39
Post #15





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----


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ć ....
Go to the top of the page
+Quote Post
kpt_lucek
post 11.04.2015, 16:41:59
Post #16





Grupa: Zarejestrowani
Postów: 428
Pomógł: 77
Dołączył: 10.07.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


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


--------------------


Cytat
There is a Bundle for that
Lukas Kahwe Smith - October 31th, 2014
Go to the top of the page
+Quote Post
kosmos
post 11.04.2015, 17:41:31
Post #17





Grupa: Zarejestrowani
Postów: 367
Pomógł: 17
Dołączył: 4.03.2008

Ostrzeżenie: (0%)
-----


Teraz to dopiero mam zabawę ze stylami .... nie słuchają mnie się smile.gif

Go to the top of the page
+Quote Post
kpt_lucek
post 11.04.2015, 18:00:23
Post #18





Grupa: Zarejestrowani
Postów: 428
Pomógł: 77
Dołączył: 10.07.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


Wszystko zależy od tego co i jak robisz, pamiętaj że nie wszystko zrobisz przez formularz smile.gif


--------------------


Cytat
There is a Bundle for that
Lukas Kahwe Smith - October 31th, 2014
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 12:43