Resizable Textarea
HTML-ში ყველამ ვიცით textarea ელემენტი. თითქმის ყველა ბროუზერში ეს ელემენტი გვხდება ფიქსირებული სიგრძე სიგანით. მაგრამ მხოლოდ თითქმის(!) ყველა ბროუზერში. თუ გადავხედავთ ამ ელემენტს Safari და Chrome-ში ვნახავთ რომ მას მარჯვენა ქვედა კუთხეში მოსდევს მისი ზომის გასაზრდელ შესამცირებელი იკონი გარკვეულ სიტუაციებში ეს უხერხულობას გვიქმნის. ამ უხერხულობის თავიდან ასაცილებლად შეგვიძლია მას სტილში ვუკარნახოთ თუ როგორი გვინდა იყოს იგი. სულ გვაქვს პირობითად დაყოფილი 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]
თუმცა თუ ეს წარუმატებელი ვალიდაცია პრობლემას არ წარმოადგენს თქვენთის შეგიძლიათ წარმატებით გამოიყენოთ იგი 🙂