[CSS]Wysokość <textarea> dostosowująca się do ilości tekstu Opcje

[sadistic_son]

Witajcie,
Sprawa z pozoru prosta. Wynik z SELECT * wrzucam do <textarea> oddzielnie każdy rekord. To pole textarea ma ustaloną szerokość ale w zależności od ilości tekstu ma się rozszerzać w pionie. Jak? Height:100% nie daje efektu.

[CSS] pobierz, plaintext 
.message_box{
	height:100%;
	width:500px;
}
 
.message_body textarea{
	width:100%;
	height:100%;
}
[CSS] pobierz, plaintext 

[PHP] pobierz, plaintext 
while($row=mysql_fetch_row($result)){
 
echo '<div class="message_box">';
 
echo '<div class="message_body"><textarea>'.$row[2].'</textarea></div>';
 
echo '</div>';
}
[PHP] pobierz, plaintext 

Dzięki z góry.


No chyba, że nospor zaraz zamknie odsyłając mnie do samouczka.

Ten post edytował sadistic_son 13.10.2016, 15:53:02

[nospor]

No chyba, że nospor zaraz zamknie odsyłając mnie do samouczka.

Czemu? A co to ja babajaga?

[SmokAnalog]

Na pewno nie bez JavaScriptu. Mam taki pomysł, że mógłbyś utworzyć niewidzialny element, który miałby identyczną czcionkę, width, line-height itd. jak Twój textarea i w miarę wpisywania do textarea (zdarzenie input), ta kopia dostawałaby tę samą treść. Następnie sprawdzasz jaką ma wysokość ten element i ustawiasz taką samą wysokość na textarea.

Innym pomysłem jest ukrycie textarea, a pokazywanie tylko normalnego elementu, który w locie dostaje treść z textarea. Trochę gorsze rozwiązanie moim zdaniem, bo tracimy niektóre właściwości textarea.

Dodam, że takie coś jest na Facebooku, kiedy np. piszemy komentarz. Zajrzałem w drzewo DOM i oni używają specjalnego diva. Nie ma nawet żadnego textarea w tle, nic. Po prostu wpisuje się do diva.

Ten post edytował SmokAnalog 15.10.2016, 12:28:41

[sadistic_son]

Ale mi nie chodzi o rozszerzanie textarea live, tzn w momencie pisania. Chodzi o to, że output z bazy poprzez while() jest wrzucany do textarea. Raz jest w nim jeden wyraz a raz 200 zdań.

[viking]

http://stackoverflow.com/questions/454202/...ith-auto-resize

[sadistic_son]

Panowie, dzięki za odpowiedzi ale nie o to mi chodzi, źle mnie zrozumieliście. Nie chodzi o resize textarea na żywo w trakcie pisania. Chodzi o rozciągnięcie się textarea jednorazowo, dopasowanie do ilości tekstu w nim. Te textarea są tylko po to aby łatwiej było kopiować text, nic nie będzie w nie wpisywane przez usera, tylko będzie wsadzany tekst z bazy.
Podam przykład:

[HTML] pobierz, plaintext 
<div class="pojemnik">
    <div class="jeden">trochę tekstu</div>
    <div class="dwa"> tutaj jest dużo tekstu.tutaj jest dużo tekstu.tutaj jest dużo tekstu.tutaj jest dużo tekstu.tutaj jest dużo tekstu.</div>
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
.pojemnik{
width:50px;
height:100%;
}
 
.jeden{
width:100%;
height:100%;
}
 
.dwa{
width:100%;
height:100%;
}
[CSS] pobierz, plaintext 

Div jeden powinien mieć szerokość 50px i wysokość... no powiedzmy tyle ile wysokości mają litery:) Div dwa będzie miał szerokość 50px ale jako, że tekstu jest na kilka linijek to jego wysokość będzie dużo większa od diva jeden, mimo, że w CSS mają dokładnie te same atrybuty (width i height na 100%).
I o to samo mi chodzi z textarea. Wg mnie powinno to działać tak samo dla textarea ale nie działa. Cholerstwa trzymają wszystkie ten sam rozmiar, bez względu ile tekstu w nich jest. I czemu tak?

Ten post edytował sadistic_son 18.10.2016, 16:06:06

[nospor]

A jaki problem odpalic ten kod tylko raz po zaladowaniu strony? Nawet nie przeczytales odpowiedzi porzadnie... Jeden z przykladow co podal viking robi dokladnie to co chcesz.

[sadistic_son]

No dobra, teraz przejrzałem dokładniej odpowiedzi, kilka z nich użyłem. To nawet robi mniej więcej to o co mi chodzi:

[HTML] pobierz, plaintext 
<textarea id="autosize" style="width:200px;">a
b
c</textarea>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/autosize.js/1.18.4/jquery.autosize.min.js"></script>
<script>$('#autosize').autosize()</script>
[HTML] pobierz, plaintext 

Ale raz, że tutaj uzyte są zewnętrzne skrypty. A dwa, że w ogóle wolę uniknąć Javascripta, jako że strona będzie śmigać od PCtów przez MACe, Androidy, na IOSach kończąc. Tak, wiem, można to wszystko zoptymalizować pod każdą przeglądarkę, ale dla mnie to bez sensu korzystać z takiego rozwiązania skoro da się to zrobić CSSem (tak myślę).



EDIT: Panowiedzięki, będą plusiki, jeśli nie da się znaleźć rozwiązania CSS'em. Na razie nie daję "pomógł" bo inni przestaną zaglądać do tematu;)

Ten post edytował sadistic_son 18.10.2016, 16:25:12

[nospor]

Te skomplikowane zadanie sprowadza sie do ustawienia height dla textarea wartosci z scrollHeight. Wszystko to mozesz zrobic bez tej calej masy zewnetrznych skryptow. To sa dwie linijki czystego js ktore beda dzialac raczej wszedzie.

[maviozo]

Jeżeli w php znasz ilość wieszy, to możesz to pomnożyć przez wysokość pojedynczego wiersza i taką ustawić wysokość.

Ten post edytował maviozo 21.10.2016, 15:12:44

[sadistic_son]

@maviozo to gdzie tu automatyzacja skoro mam wartość wpisywać z palca?

Chyba poprzestanę jednak na rozwiązaniach javascript.

Dzięki Panowie.

[Niree]

@maviozo to gdzie tu automatyzacja skoro mam wartość wpisywać z palca?

Chyba poprzestanę jednak na rozwiązaniach javascript.

Dzięki Panowie.

[PHP] pobierz, plaintext 
echo <<< html
<textarea rows="{$ilosc_zdan}" />
html;
[PHP] pobierz, plaintext 

Skryptem PHP wyczytujesz ilość zdań (np. po kropce na końcu zdania) i zapisujesz jako $ilosc_zdan.