css - test - Textos de texto de JQuery Mobile: ¿cómo usa el atributo ''filas''?

jquery mobile tutorial

Question

Me gustaría generar dinámicamente áreas de texto, con JQuery Mobile, con números variables de filas. Tenía la intención de usar knockout para esto, enlace de datos al atributo de rows .

Por ejemplo, aquí: http://jsfiddle.net/j7b9A/2/

<label for="textarea-1">5 rows:</label>
<textarea rows="5" name="textarea-1" id="textarea-1"></textarea>

<label for="textarea-2">10 rows:</label>
<textarea rows="10" name="textarea-2" id="textarea-2"></textarea>

Sin embargo, JQuery Mobile parece ignorar el atributo de rows , que está bien documentado: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea , e incluso se incluye en la propia documentación de JQuery Mobile. : http://view.jquerymobile.com/1.3.1/dist/demos/widgets/textinputs/index.html#Textarea .

Un comentario aquí indica que establecer el alto y el ancho anula el atributo de rows : https://stackoverflow.com/a/7194692/1061602 . Parece que es porque JQuery Mobile está haciendo una transición cuando el área de texto se expande. Entonces, ¿el atributo de filas siempre se reemplaza por completo?

Otra pregunta similar está aquí: ¿Cómo hacer que el área de texto tenga una altura de 10 filas fija? , pero esto no me ayuda, ya que no quiero arreglar la altura de todas las áreas de texto, me gustaría que varíen, ya que normalmente pueden usar el atributo de rows .

También lo que he notado, que no puedo explicar, es que en mi propio código, un style="height: 184px;" deshonesto style="height: 184px;" se agrega a una de mis áreas de texto, pero no a otra. El otro solo usa el estilo estándar de 50px, como se destaca en esta respuesta: filas de jQuery Mobile y textarea : esto parece indicar que hay algo más en marcha, pero no puedo reproducir esto todavía en un simple violín.

He echado un vistazo rápido a la fuente de JQuery Mobile pero no veo el atributo de rows en uso.

¿Cuál sería la mejor manera de especificar un rango de alturas de fila para un rango de áreas de texto enlazadas de JQuery Mobile?

Answer 1

jQM mejora textarea agregando diferentes clases para la capacidad de respuesta y el estilo. La forma más rápida y sencilla de mantener la altura de las rows es anulando la clase jQM.

Manifestación

Solución CSS:

.custom_class {
  height: auto !important; /* !important is used to force override. */
}

Solución JS: configure la altura después de que se mejore el área de texto.

setTimeout(function () {
  $(''textarea'').css({
    ''height'': ''auto''
  });
}, 0);

Answer 2

todo lo que necesitas es ... agrega esto

textarea.ui-input-text { height: inherit !important}

Answer 3

El contenido del área de texto se desplaza automáticamente cuando hay más líneas. altura máxima que desee. Añadir css

 textarea.size{max-height:30px;}

 <textarea name="textarea-1" id="textarea-1" style="max-height:30px;">

Answer 4

Tuve el mismo problema y finalmente encontré una solución. puede establecer ''data-autogrow = "false"'' en el elemento textarea, después de eso puede establecer filas de atributo o altura en css. funciona en jquery mobile 1.4.0+

Answer 5

Puedes usar esto: data-autogrow="false"
de esta manera: <textarea rows="10" name="textarea-2" id="textarea-2" data-autogrow="false"></textarea>

Answer 6

JQuery Mobile está diseñado para ser receptivo, por lo que, por diseño, no ocupará espacio hasta que lo necesite. Si agrega datos al área de texto, ya sea por entrada o por código, puede ver que crece según sea necesario.

Si desea anular ese tamaño cuando está vacío, tiene dos opciones:

1. Use el método mencionado por Omar, que es desactivar el rol de JQM, como lo hizo en el ejemplo de JSFiddle.

2. El otro es anular la clase predeterminada, como se ve en esta respuesta .