Readme.ge Blog

FB image FB image

Resizable Textarea

ავტორი: ალექსანდრე თარიღი: Friday, January 30th, 2009

HTML-ში ყველამ ვიცით textarea ელემენტი.  თითქმის ყველა ბროუზერში ეს ელემენტი გვხდება ფიქსირებული სიგრძე სიგანით. მაგრამ მხოლოდ თითქმის(!) ყველა ბროუზერში. თუ გადავხედავთ ამ ელემენტს Safari და Chrome-ში ვნახავთ რომ მას მარჯვენა ქვედა კუთხეში მოსდევს მისი ზომის გასაზრდელ შესამცირებელი იკონი textarea გარკვეულ სიტუაციებში ეს უხერხულობას გვიქმნის. ამ უხერხულობის თავიდან ასაცილებლად შეგვიძლია მას სტილში ვუკარნახოთ თუ როგორი გვინდა იყოს იგი. სულ გვაქვს პირობითად დაყოფილი 2 სტილი –

1
2
 max-width: 150px;
 max-height: 60px;

რითიც მას ვუთითებთ მაქსიმუმ ზომებს თუ სადამდე მივცეთ უფლება გაიზარდოს ეს ელემენტი მაუსით გათრევისას. ხოლო თუ საერთოდ არ გვინდა რომ Resizable იყოს ჩვენი Textarea მაშინ სტილში უბრალოდ ვუწერთ –

1
 resize: none;

და ამითი მარტივად ვაუქმებთ ამ ელემენტზე ზომების ცვლილების შესაძლებლობას. ქვემოთ მოცემულია მაგალითი, რომელშიც ამ სტილების ეფექტურობის გამოსავლენად საჭიროა გამოიყენოთ ბროუზერები Safari ან Chrome (სადაც Default-ად აქვს ამ ელემენტს ზომების ცვლილების მხარდაჭერა)

მაგალითი

P.S. სამწუხაროდ css-ის სტილი resize ვერ გადის W3C-ის CSS ვალიდაციას CSS level 2.1-ზე. მესიჯი ესეთია

Property resize doesn’t exist in CSS level 2.1 but exists in [css3]

თუმცა თუ ეს წარუმატებელი ვალიდაცია პრობლემას არ წარმოადგენს თქვენთის შეგიძლიათ წარმატებით გამოიყენოთ იგი 🙂

კატეგორიებში: CSS, HTML. |

დატოვე კომენტარი

...