Cómo ocultar el contador de caracteres activo en Flask-WTforms StringField y materializar CSS

Estoy viendo un pequeño mostrador que muestra el número de caracteres escritos. Quiero esconder ese contador. No hay validadores de longitud en mis formas.

He tratado de llegar a textareafield pero lo mismo persiste.

Quiero ocultar la cosa resaltada

enter image description here




    

     
Login

        {{form.hidden_tag()}}
        

            {{form.username.label()}} 
            {{form.username(class="form-control form-control-lg")}}
        
 

        

            {{form.password.label(class="form-control-label")}} 
            {{form.password(class="form-control form-control-lg")}}
        
     

        

        {{form.submit(class="btn btn-outline-info")}}

Este es Html

class User_Form(FlaskForm):
username=StringField('Username', validators=[DataRequired()])
password=PasswordField('Password', validators=[DataRequired()])
submit=SubmitField('Login')

Esta es la forma

Pregunta hecha hace 3 años, 4 meses, 28 días - Por codejuggernaut

2 Respuestas:

  • Para ocultar el contador de caracteres en un campo de tipo StringField de Flask-WTForms, puedes utilizar el siguiente enfoque:

    En el archivo de tu formulario Flask-WTForms, puedes personalizar el campo StringField para que no muestre el contador de caracteres. Para ello, puedes agregar la clase CSS form-control al campo username y luego añadir un estilo CSS personalizado para ocultar el contador.

    Aquí tienes un ejemplo de cómo podrías modificar tu código:

    En el archivo HTML:

    html

    
    
        
    
            
    Login
    
            {{form.hidden_tag()}}
            
    
                {{form.username.label}} 
                {% set username_class = 'form-control form-control-lg' %}
                {{form.username(class=username_class)}}
                
            
     

            
    
                {{form.password.label(class="form-control-label")}} 
                {{form.password(class="form-control form-control-lg")}}
            
         

            
    
                {{form.submit(class="btn btn-outline-info")}}

    En el archivo de formulario Flask-WTForms:

    python
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired

class User_Form(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    password = PasswordField('Password', validators=[DataRequired()])
    submit = SubmitField('Login')

    Al definir la clase username_class como 'form-control form-control-lg' y establecer el ancho al 100% en el estilo CSS, el contador de caracteres debería ocultarse en el campo de usuario.

    Espero que esta solución te ayude a ocultar el contador de caracteres en tu campo de formulario en Flask-WTForms. ¡Déjame saber si tienes alguna otra pregunta!

    Respondida el Dec 19, 2020 a las 05:07 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para ocultar el contador de caracteres activo en Flask-WTForms StringField y materializar CSS, sigue estos pasos:

    • Inspecciona el HTML: Abre el HTML generado y busca el elemento que contiene el contador de caracteres. Por lo general, es un elemento `span` con una clase como `form-control-feedback`.
    • Crea una regla CSS: Agrega una regla CSS que oculte el elemento del contador de caracteres. Por ejemplo:
    
.form-control-feedback {
  display: none;
}
    • Agrega la regla CSS a tu plantilla: Agrega la regla CSS a tu plantilla HTML dentro de etiquetas `

      O bien, puedes incluir un archivo CSS separado que contenga la regla.

      Nota: Asegúrate de que la regla CSS tenga una mayor especificidad que cualquier otra regla que pueda estar ocultando el elemento deseado.

      Ejemplo de código completo:

      html



  


  
      
    
      
      
      Login
      
      {{ form.hidden_tag() }}
      
      
        {{ form.username.label() }}
        {{ form.username(class="form-control form-control-lg") }}
      
      

      
      
        {{ form.password.label(class="form-control-label") }}
        {{ form.password(class="form-control form-control-lg") }}
      
      

      
      
        {{ form.submit(class="btn btn-outline-info") }}

      Una vez que hayas agregado la regla CSS, el contador de caracteres debería estar oculto.

      Respondida el Dec 19, 2020 a las 05:19 - por Gemini

    Votos positivos: 0 | Votos negativos: 0