Area di testo di JQuery Mobile: come si usa l'attributo 'righe'?

Question

Vorrei generare dinamicamente textarea, con jQuery Mobile, con un numero di righe variabile. Intendevo utilizzare knockout per questo, data-bind all'attributo rows.

E.g. qui: 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> 

Tuttavia, jQuery Mobile sembra ignorare l'attributo rows, che è ben documentato: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea, ed è anche incluso nella propria documentazione di jQuery Mobile: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/textinputs/index.html#Textarea.

Un commento qui afferma che l'impostazione di altezza e larghezza sostituisce l'attributo rows: https://stackoverflow.com/a/7194692/1061602. Sembra che JQuery Mobile stia facendo una transizione quando la textarea si espande. Quindi l'attributo delle righe è sempre completamente ignorato?

Un'altra domanda simile è qui: How to make text area to be height of 10 rows fixed?, ma questo non mi aiuta poiché non voglio correggere l'altezza di tutte le aree di testo, vorrei che fossero diverse, in quanto normalmente possono utilizzare l'attributo rows.

Anche quello che ho notato, che non posso spiegare, è che nel mio codice, un ladro style="height: 184px;" viene aggiunto a uno dei miei textareas, ma non a un altro. L'altro usa solo lo stile standard di 50px, come evidenziato in questa risposta: jQuery Mobile and textarea rows - questo sembrerebbe indicare che c'è qualcos'altro che sta succedendo, ma non posso ancora riprodurlo in un semplice violino.

Ho dato una rapida occhiata al sorgente JQuery Mobile ma non riesco a vedere l'attributo rows utilizzato?

quale sarebbe il modo migliore per specificare un intervallo di altezza delle righe per una serie di rilegati textareas jQuery Mobile?

Answer 1

jQM migliora textarea aggiungendo classi diverse per reattività e scopi di stile. Il modo più semplice e veloce per mantenere rows altezza è sovrascrivendo classe jQm.

Demo

soluzione CSS:

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

soluzione JS - impostare l'altezza dopo textarea è migliorata.

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

Answer 2

Area di testo contenuti scorrimento automatico quando più linee. altezza massima come desideri. Aggiungere css

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

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

Answer 3

jQuery Mobile è destinato ad essere reattivo, in modo da disegno non sta andando a prendere lo spazio fino a quando ne avete bisogno. Se aggiungi dati alla textarea, tramite input o tramite codice, puoi vedere che cresce all'occorrenza.

Se si vuole ignorare che la dimensione quando è vuoto, si hanno due opzioni:

1. utilizzare il metodo Omar citato, che è quello di spegnere il ruolo jQm, come avete fatto nell'esempio JSFiddle.

2. L'altro deve sostituire la classe predefinita, as seen in this answer.

Answer 4

tutto ciò che serve è ... aggiungere questo

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

Answer 5

Ho avuto lo stesso problema e ho finalmente trovato una soluzione. puoi impostare 'data-autogrow = "false"' nell'elemento textarea, dopo di che puoi impostare l'attributo o l'altezza delle righe in css. lo fa lavori in jQuery Mobile 1.4.0+

Answer 6

È possibile utilizzare questo: data-autogrow="false"
come questo: <textarea rows="10" name="textarea-2" id="textarea-2" data-autogrow="false"></textarea>