Cómo dar formato a los campos del formulario para django comentarios?

Question

Estoy utilizando una forma que se genera para mí por Django. Estoy usando esto como una forma de comentario después de un post en mi blog.

En la actualidad se hace bien, pero no está bien alineada. Esto es lo que tengo. Esto es lo que me gustaría.

Gracias

editar: Este es el resultado cuando el usuario {{form.as_table}}

Answer 1

Publicar mi solución con la esperanza de que va a ayudar a otra persona un día. Yo sabía que habías el estilo de los campos con CSS, pero no estaba seguro de cómo asignar las clases para cada elemento. Pero si se echa un vistazo a la plantilla por defecto proporcionada se dará cuenta de que la clase de error se asigna a un campo utilizando una sentencia if dentro de un bucle foreach que genera automáticamente cada campo dentro de su formulario. es decir.

{% for field in form %}    
< p{% if field.errors %} 
    class="error"
{% endif %}
    {{ field.label_tag }}<'/' p> 
{% endfor %}

Así que añadió a esta funcionalidad.

< p{% if field.errors %} 
    class="error"
{% endif %}
{% ifequal field.name "honeypot" %} 
    id="hide"
{% else %}
     id="left"
{% endifequal %}>
    {{ field.label_tag }}<'/' p> 

mi css bienestar

#hide{
    display:none;

}

#left{
    width: 200px;
    text-align: left;

}

#right{
    width: 300px;
    text-align: left;

}

Ahora que puede establecer sus clases se pueden configurar fácilmente sus clases o ID dentro de su archivo css. Esto es para los comentarios. Si estás utilizando un form.as_p {{}} o {{}} form.as_table para generar el formulario a continuación, que acaba de establecer una clase de forma general dentro de su estilo CSS para ello. es decir.

form {
width: 350px;
padding: 20px;
border: 1px solid #270644;
}

Answer 2

Sé que es un poco tarde, pero para todos los demás que puede probar este

<table>
{{ form.as_table }}
</table>

Se fija el problema de formato molesto, y se ve decente.

Answer 3

Para consultar Personalización de la plantilla de formulario . Esta es una solución posible.

Tal vez usted puede simplemente utilizar CSS para el estilo de su forma y render forma como te gusta. (Es decir, as_table () ).

Answer 4

Uso de la {% render_comment_form for app.model %} predeterminado generará:

<p>
      <label for="id_name">Name</label> 
      <input id="id_name" type="text" name="name" maxlength="50">
    </p>
    <p>
      <label for="id_email">Email address</label> 
      <input type="text" name="email" id="id_email">

</p>
... etc

Por lo tanto, puede orientar label en su hoja de estilo CSS usando:

label {
  width: 15%;
}

Answer 5

Existen varios enfoques que se detallan en este post , sin embargo, he encontrado que los atributos veces widget no pueden trabajar de la manera que quería.

Aún así, la mejor y más fácil manera de hacerlo es utilizar CSS:

Render su página que contiene los campos del formulario y hacer algo de inspección (clic derecho> inspeccionar o F12 en Chrome, por ejemplo) para saber qué etiquetas HTML genera su forma cuando se representa. A continuación, se puede escribir el CSS fácilmente.

Usted tiene campos input y textarea en su formulario para el CSS será:

input, textarea{
    width:350px;
}

No se olvide de llamar para su archivo CSS en la parte superior de plantillas html:

<link rel="stylesheet" type="text/css" href="{% static 'styles/form.css' %}">

Esta es una instantánea de lo que tengo a mi propia forma: