Hallo reader, pada postingan kali ini admin akan memberikan tutorial mudah cara membuat element div pada html agar bisa di resize. Property CSS yang akan kita gunakan yaitu Resize property.
Resize property pada CSS digunakan untuk mengontrol apakah elemen dapat diubah ukurannya oleh pengguna atau tidak. Nilai default dari resize property adalah "none", yang berarti bahwa elemen tidak dapat diubah ukurannya oleh pengguna. Namun, jika Anda menetapkan nilai "both", "horizontal", atau "vertical" pada resize property, maka elemen dapat diubah ukurannya oleh pengguna.
Property ini sudah support di hampir semua browser dibawah ini
<div class="resizediv">Resize me<div/>Selanjutnya kita tambahkan Style sebagai berikut :
.resizediv{
height:5rem;
width:14rem;
color:white;
background-color:navy;
border:3px solid yellow;
display:flex;
justify-content:center;
align-items:center;
overflow:auto;
resize:auto;
}
Berikut output dari kode diatas, element div bisa kita atur size nya. untuk mencobanya silahkan masuk ke codepen dibawah ya See the Pen Resizable Div by erick sutedy (@erickstdy) on CodePen.
Ini akan menambahkan sebuah handle di sudut kanan bawah elemen <div> yang dapat digunakan untuk mengubah ukurannya. Anda juga perlu menambahkan properti "overflow" seperti "auto" atau "scroll" agar elemen dapat menampilkan scrollbar jika isi dari elemen terlalu banyak untuk ditampilkan dalam ukuran yang diubah.Selain itu, kita juga dapat mengatur min-height, min-width, max-height, max-width untuk mengatur batasan ukuran yang diijinkan dari elemen yang diubah ukurannya.
Resize property ini bisa sangat berguna dalam beberapa kasus, seperti form input, layout grid, dan lainnya. Namun, jangan mengubah ukuran elemen secara acak, pastikan untuk memberikan ukuran yang sesuai dengan konteks di mana elemen itu digunakan.
Sekian tutorial super singkatnya, semoga bermanfaat.
0 Komentar