El tamaño de entrada del formulario Bootstrap no se respeta

Por ejemplo: En / user / login, los campos de entrada de nombre de usuario y contraseña incluyen un atributo HTML size = «60».

En Bartik, los campos tienen un ancho fijo.

En Bootstrap , los campos se amplían para ocupar todo el ancho de la pantalla.

Comportamiento solicitado: Me gustaría Haga que Bootstrap obedezca el atributo de tamaño: en / user / login, y en todas las demás páginas del sitio web. No puedo generar una lista de todas las páginas afectadas porque hay muchas y cambiará con el tiempo.

Parece que algo en Bootstrap SCSS está arruinando los anchos de los campos de entrada. Me gustaría eliminar ese algo o anularlo. Sin embargo, todavía no pude averiguar cómo hacerlo.

Lo que he encontrado hasta ahora: Ya existe un problema en Drupal.org , donde el encargado del módulo markcarver dice

La razón por la que «se» estiraron «todo el ancho es que ambos tienen una clase de control de forma. Esto es parte del diseño de Bootstrap y no voy a luchar contra eso de inmediato. Hay varias formas de modificar este formulario como mejor le parezca, en un subtema.

Lo que funciona parcialmente pero no 100% correcto: Sería posible escribir CSS para establecer un nuevo ancho en todas las entradas con la clase de control de formulario de tipo de texto. Eso es bueno, pero establece el ancho en un valor fijo como 15em. Me gustaría recuperar el ancho original, que será diferente en cada entrada.

Comentarios

  • Me pregunto por qué don ' ¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿No simplemente arreglas esto con CSS ????
  • @leymannx). 5030d21114 «>

. Sí, espero solucionarlo con CSS, pero estoy buscando un único cambio que cubra todos los campos. Si sabe cómo hacerlo, publique o comente.

  • Si la persona que votó en contra puede explicar por qué, tal vez yo pueda aprender algo y hacer mejores preguntas en el futuro
  • No ' t vota en contra, pero supongo que sucedió porque en realidad haces una pregunta demasiado amplia y no ' resaltas nada de lo que hayas hecho tú mismo. hasta ahora para solucionar este problema por su cuenta. Aparte de eso, cuando puede solucionarlo con CSS y preguntarnos cómo hacerlo, entonces esta pregunta también está fuera de tema. Ganamos ' no le enseñamos a crear un subtema y no ' no le enseñamos a escribir CSS robusto. Ya hay cientos de tutoriales que cubren eso. ¡Buena suerte! 🙂
  • @leymannx Gracias. De hecho, estoy haciendo una pregunta muy específica, pero supongo que la he explicado mal. ' intentaré una edición más. Pero tal vez debería simplemente eliminar la pregunta ya que está causando confusión.
  • Respuesta

    La forma estándar de solucionar esto es para usar css en su subtema basado en Bootstrap. Para los campos de inicio de sesión de nombre de usuario y contraseña:

    #edit-name, #edit-pass { width: 15em; } 

    NB: estoy buscando una solución que cubra todos forma de entrada, no solo el inicio de sesión del usuario como un caso especial.

    Puede usar este método (css) para cada campo de entrada de texto donde desee anular Comportamiento predeterminado de Bootstrap. Obviamente, debe usar el selector de CSS correcto para el campo que desea anular.

    Comentarios

    • Gracias por tomarse el tiempo para responder. Consulte mi " EDIT 2 ". Espero evitar tener que identificar todos los campos que podrían verse afectados caso por caso. ya que eso no es práctico o mantenible
    • ¿Entrada y destino por clase de control de formulario de tipo de texto?
    • @kevin, lo siento, pero no entiendo la pregunta.
    • en lugar de usar ID, puede orientar las entradas con esa clase, que son del tipo ' text '.
    • @Kevin gracias, sí, eso se parece más a lo que esperaba. Sin embargo, parece que todavía estaría atascado con un ancho fijo como 15em. Preferiría mantener el ancho real especificado en # tamaño. Me gustaría " deshacer " todo lo que hizo Bootstrap para anular los anchos y seleccionar exactamente el mismo ancho que ocurre en Bartik.

    Respuesta

    Esperaba una respuesta de un experto y aún así lo agradecería. Me complacería aceptar otra respuesta en lugar de la mía.

    Este es mi mejor intento hasta ahora. Parece funcionar para la página de inicio de sesión y el bloque de búsqueda. Sin embargo, todavía siento que «estoy luchando contra un sistema que no conozco» No entiendo completamente.

    .form-control, .input-group .form-control, .input-group-btn { width: auto; } 

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *