Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

Temas para formularios en symfony con bootstrap

10 de septiembre de 2015

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

#1

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

11 septiembre 2015, 1:54
#2

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

11 septiembre 2015, 8:31
#3

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

11 septiembre 2015, 19:10
#4

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

11 septiembre 2015, 19:27
#5

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

12 septiembre 2015, 16:26
#6

He conseguido lo que necesitaba usando las 2 formas que me habeis dicho, muchas gracias Miguel y Javier.

@nonio_87

12 septiembre 2015, 19:50