0
224
ViewsNo se puede anular el estilo de la casilla de verificación usando formularios crujientes
Mientras creaba formularios para mi aplicación, tuve que crear una casilla de verificación personalizada (soy terrible con css, así que no fue fácil). Lo hice funcionar y se ve así cuando creo el formulario manualmente:
El manual html es
<div class="checkbox icheck-primary"> {{ form.active }} <label for="id_active">Active</label> </div> Pero cuando se usa el atributo wrapper_class en un Field formularios crujientes, se muestra como estándar:
Y el código de crispy forms :
self.helper.layout = Layout( Fieldset( 'Add Contact', 'first_name', Field('active', wrapper_class='icheck-primary', css_class='icheck-primary') )) Intenté usar una plantilla Div personalizada pero no pude hacer que funcionara. En los documentos, todo lo que pude encontrar fue wrapper_class .
¿Me estoy perdiendo algo simple o alguien podría indicarme la dirección correcta?
[Editar] Salida HTML de crispy_forms :
<div id="div_id_active" class="checkbox icheck-primary"> <label for="id_active" class=""> <input name="active" class="checkboxinput" id="id_active" checked="" type="checkbox"> Active </label> </div> Y aquí está mi manual/formularios html generados
<div class="checkbox icheck-primary"> <input name="stay_logged_in" class="checkbox icheck-primary" id="id_stay_logged_in" type="checkbox"> <label for="id_stay_logged_in">Remember me</label> </div> [Editar 2] Esta es una muestra de los css selectors
.radio > input[type="radio"]:first-child:checked + label::before, .checkbox > input[type="checkbox"]:first-child:checked + label::before, .radio > input[type="radio"]:first-child:checked + input[type="hidden"] + label::before, .checkbox > input[type="checkbox"]:first-child:checked + input[type="hidden"] + label::before { content: "\e013"; display: inline-block; font-family: 'Glyphicons Halflings'; font-weight: normal; font-size: 10px; color: #b4aba1; position: absolute; width: 22px; height: 22px; line-height: 20px; border: 2px solid #b4aba1; border-radius: 0 !important; background-color: #0060a1 !important; text-align: center; margin-left: -29px; vertical-align: text-top; }2 answers
Answer question0
Después de un poco de ayuda en los comentarios de @dirn, volví e hice una plantilla personalizada.
Dado que todas mis casillas de verificación deberían tener el mismo aspecto, creé una checkboxinput_template basada en las plantillas crispy_forms existentes:
{% load crispy_forms_field %} <div id="div_{{ field.auto_id }}" class="checkbox icheck-primary {% if form_show_errors and field.errors %} error{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}"> {{ field }} <label class="control-label {{ label_class }}" for="id_{{ field.html_name }}">{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}</label> <div class="controls {{ field_class }}"> {% include 'bootstrap3/layout/help_text.html' %} </div> </div> Agregué la clase icheck-primary al div circundante y moví el campo fuera de la etiqueta de la etiqueta. Esto permitió que los selectores funcionaran correctamente.
Creo que esto también podría hacerse anulando los fields.html pero por el momento esto resuelve mi problema.
Probablemente esta no sea la mejor solución y agradecería que alguien pudiera compartir una mejor.
0
No tengo experiencia con django-crispy-forms, pero uso django-widget-tweaks para agregar css a los formularios de django. Solo necesita ajustar plantillas, sin código python. Lo hace mucho más fácil y mantiene el estilo separado del código.