⚈ Kuopassa.net

Lisää kirjoituksia netistä.

CSS-niksi, jolla monirivisen tekstikentän kokoa voi säädellä

Kirjoitettiin
Päivitettiin 8. kesäkuuta 2014 kello 01.40

Monirivinen tekstikenttä textarea venyy nykypäivän nettiselaimissa sen oikeassa alakulmassa olevaa kulmaa liikuttamalla. Tuon kulman avulla tekstialuetta voi venyttää, vanuttaa horisontaalisesti ja vertikaalisesti. CSS:n avulla venymiselle voi asettaa rajoituksia. Moniriviseen tekstikenttään kun voi asettaa sellaisia määrityksiä kuin min-height, max-height, min-width ja max-width. Lisäksi on olemassa jollain nörtähtävällä tavalla hauska temppu, jolla voi säätää annetaanko tekstialuetta venyttää ollenkaan vai halutaanko se rajoittaa sallituksi vaikkapa vain pystysuuntaisesti.

textarea {
min-height: 20px;
height: 50px;
max-height: 250px;
width: 300px;
resize: vertical;
-o-resize: vertical;
-moz-resize: vertical;
-ms-resize: vertical;
}

Mitä tuo tekee? Selvää on, että nuo koodissa näkyvät väkäsulkujen väliin kohdistuvat jutut koskevat ainoastaan textarea-elementtiä. Se on siis sellainen, joka näkyy vaikkapa tässä lomakkeessa. Tuossa Tropiclandian sivun alaosassa on lomake, jolla voi kommentoida kylpyläkokemusta. Kommentointilomakkeen yläosasa on monirivinen tekstikenttä. Sen alla yksirivinen. Nämä mainitsemani CSS-merkkaukset ovat käytössä juuri tuossa kommenttilomakkeessa.

Ensimmäiseksi lomakkeen minikorkeudeksi on asetettu 20 pikseliä ja oletuskorkeudeksi 50 pikseliä. Minimikorkeus on 20px, koska jos lomakkeen korkeutta venyttää tekstialueen oikeasta alakulmasta raahaamalla, haluan kentän muistuttavan "käsittelyn" jälkeenkin tekstialuetta. Toiseksi lomakkeen maksimikorkeudeksi on asetettu 250 kuvapikseliä. Se on mielestäni riittävä enimmäiskorkeus. Ei ole tarpeen antaa esimerkiksi 1000 pikseliä korkeutta, koska ei niin vuolaita kommentteja kukaan kirjoita ja pitkissäkin kommenteissa on tekstikentän oikeassa reunassa vierityspalkki apuna. Maksimin olisi voinut jättää asettamattakin, joskin silloin kentän korkeus voi lipsahtaa hyvin suureksi. Kolmantena huomionarvoisena asiana on tekstikentän leveys. Se on asetettu oletusarvoisesti 300 pikseliin. Tässä yhteydessä ei ole minimi- eikä maksimileveyttä, koska… lopuksi monirivisen tekstialueen venytysmahdollisuudet on rajoitettu tapahtuvaksi vain pystysuunnassa. Koodirivit, jotka alkavat resize, -o-resize jne. ovat kaikki samaa asiaa tarkoittavia, ne vain ovat eri nettiselaimille suunnattuja. Esimerkiksi se rivi, jossa lukee -o-resize: vertical; on tarkoitettu Operalle.

Tagit:

Tietoa kirjoittajasta

Tsekkaa myös minkälaisia valokuvia teen: www.pjti.fi