que - selector padre css

Agregue una clase css a un campo en wtform

Question

Estoy generando una forma dinámica usando wtforms (y matraz). Me gustaría agregar algunas clases CSS personalizadas a los campos que estoy generando, pero hasta ahora no he podido hacerlo. Usando la respuesta que encontré here , intenté usar un widget personalizado para agregar esta funcionalidad. Se implementa casi de la misma manera que la respuesta a esa pregunta:

class ClassedWidgetMixin(object):
"""Adds the field''s name as a class.
(when subclassed with any WTForms Field type).
"""
def __init__(self, *args, **kwargs):
print ''got to classed widget''
super(ClassedWidgetMixin, self).__init__(*args, **kwargs)
def __call__(self, field, **kwargs):
print ''got to call''
c = kwargs.pop(''class'', '''') or kwargs.pop(''class_'', '''')
# kwargs[''class''] = u''%s %s'' % (field.name, c)
kwargs[''class''] = u''%s %s'' % (''testclass'', c)
return super(ClassedWidgetMixin, self).__call__(field, **kwargs)
class ClassedTextField(TextField, ClassedWidgetMixin):
print ''got to classed text field''

En la vista, hago esto para crear el campo (ClassedTextField se importa de formularios, yf es una instancia de la forma base):

 f.test_field = forms.ClassedTextField(''Test Name'')

El resto del formulario se crea correctamente, pero este jinja:

{{f.test_field}}

produce esta salida (sin clase):

<input id="test_field" name="test_field" type="text" value="">

Cualquier consejo sería genial, gracias.

Answer 1

En realidad, no es necesario ir al nivel de widget para adjuntar un atributo de clase HTML a la representación del campo. Simplemente puede especificarlo usando el parámetro class_ en la plantilla jinja.

p.ej

 {{ form.email(class_="form-control") }}

dará como resultado el siguiente HTML ::

 <input class="form-control" id="email" name="email" type="text" value="">

para hacer esto dinámicamente, digamos, usando el nombre del formulario como el valor del atributo de clase HTML, puede hacer lo siguiente:

Jinja:

 {{ form.email(class_="form-style-"+form.email.name) }}

Salida:

 <input class="form-style-email" id="email" name="email" type="text" value="">

Para obtener más información sobre la inyección de atributos HTML, consulte la documentación oficial .