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 .