Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Wysokość <textarea> dostosowująca się do ilości tekstu
Forum PHP.pl > Forum > Przedszkole
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.

  1. .message_box{
  2. height:100%;
  3. width:500px;
  4. }
  5.  
  6. .message_body textarea{
  7. width:100%;
  8. height:100%;
  9. }

  1. while($row=mysql_fetch_row($result)){
  2.  
  3. echo '<div class="message_box">';
  4.  
  5. echo '<div class="message_body"><textarea>'.$row[2].'</textarea></div>';
  6.  
  7. echo '</div>';
  8. }


Dzięki z góry.


No chyba, że nospor zaraz zamknie odsyłając mnie do samouczka.
nospor
Cytat
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.
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ń.
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:
  1. <div class="pojemnik">
  2. <div class="jeden">trochę tekstu</div>
  3. <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>
  4. </div>
  1. .pojemnik{
  2. width:50px;
  3. height:100%;
  4. }
  5.  
  6. .jeden{
  7. width:100%;
  8. height:100%;
  9. }
  10.  
  11. .dwa{
  12. width:100%;
  13. height:100%;
  14. }

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?
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:
  1. <textarea id="autosize" style="width:200px;">a
  2. b
  3. <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  4. <script src="http://cdnjs.cloudflare.com/ajax/libs/autosize.js/1.18.4/jquery.autosize.min.js"></script>
  5. <script>$('#autosize').autosize()</script>



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;)
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ść.
sadistic_son
@maviozo to gdzie tu automatyzacja skoro mam wartość wpisywać z palca?

Chyba poprzestanę jednak na rozwiązaniach javascript.

Dzięki Panowie.
Niree
Cytat(sadistic_son @ 23.10.2016, 10:40:24 ) *
@maviozo to gdzie tu automatyzacja skoro mam wartość wpisywać z palca?

Chyba poprzestanę jednak na rozwiązaniach javascript.

Dzięki Panowie.


  1. echo <<< html
  2. <textarea rows="{$ilosc_zdan}" />
  3. html;


Skryptem PHP wyczytujesz ilość zdań (np. po kropce na końcu zdania) i zapisujesz jako $ilosc_zdan.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.