Buenas noches.
Tengo una aplicación en la que voy a tener muchos formularios y tengo que modificar su aspecto. Uso bootstrap y bootstrap_3_horizontal_layout para los formularios.
Quiero por ejemplo que los textarea tengan 20 filas, los select y algunos campos no ocupen todo el ancho del <div> como hacen por defecto.
He estado mirando los form themes en la documentación, pero por lo que he visto solo puedes trabajar con el código HTML dentro del bloque y yo quiero modificar ó añadir características bootstrap a ese bloque y poder usarlo en otros formularios.
Gracias.
Respuestas
Pues yo lo que haría es, crear una copia de form_div_layout.html.twig en Resources/views/Form/fields.html.twig, luego modificas el config.yml y listo.
twig: form_themes: - 'AppBundle:Form:fields.html.twig'
Todo lo encuentras en la documentación de Symfony How to Customize Form Rendering
Espero te sirva.
@miguelplazasr
La solución que te propone @miguelplazasr es la forma correcta de hacerlo (eso sí, no extiendas de form_div_layout.html.twig sino del propio tema bootstrap_3_horizontal_layout.html.twig). Pero existe otra que también podrías considerar: CSS. Si solo estás pensando en hacer cambios estéticos en los campos del formulario, creo que aplicar unas cuantas reglas CSS sencillas sería lo más cómodo.
Si quieres cambiar más cosas, entonces sí que tendrías que crear tu propio tema de formularios a partir de la copia del tema original.
@javiereguiluz
Usando la opción de solo css. ¿La manera de hacer los cambios sería añadir la clase css en cada campo del formulario? No se si te he entendido bien.
<div class="css"> <div class="label">{{ form_label(form.age) }}</div> {{ form_errors(form.age) }} {{ form_widget(form.age) }} </div>
@nonio_87
Si usas la opción de CSS, puedes hacerlo de esta forma en el Type
->add('campo', 'tipo', array( 'label' => 'nombre', 'attr' => array( 'class' => 'tu_clase_para_input', ), 'label_attr' => array( 'class' => 'tu_clase_para_label', )))
Saludos
@miguelplazasr
Según había entendido tu pregunta original, algunos campos siempre mostrarán los mismos estilos. Por ejemplo, "los textarea tendrán 20 filas" puedes hacerlo así:
.form-group textarea { height: 320px; /* 20 filas de 16 píxeles cada una */ }
Si debes aplicar algunos estilos con más precisión, entonces sí que puedes asignar las clases CSS correspondientes tal y como te ha comentado @miguelplazasr.
@javiereguiluz
He conseguido lo que necesitaba usando las 2 formas que me habeis dicho, muchas gracias Miguel y Javier.
@nonio_87