Memanipulasi Tepi Atas Bawah Text Box Overflow Auto

Memanipulasi Tepi Atas Bawah Text Box Overflow Auto

Bola Hero Gawai

Memanipulasi Tepi Atas Bawah Text Box Overflow Auto

Ketika memperhatikan text box atau text area dan sejenisnya yang menggunakan overflow auto untuk menciptakan scroll bar, ada sedikit yang menurut saya kurang bagus yaitu ketika kita scroll ke atas atau ke bawah maka elemen yang ada di dalamnya akan menyentuh tepi atas atau tepi bawahnya.

Walaupun kita menambahkan padding pada box-nya untuk mengatur jarak tepi dengan elemen dalamnya, hal ini tidak berfungsi ketika scroll-nya dijalankan. Begitu pun dengan menambahkan margin pada elemen dalamnya, ketika kita melakukan scroll maka elemen dalamnya akan tetap terlihat menyentuk tepi atas atau tepi bawahnya.

Untuk itu kini saya mencoba untuk memanipulasi text box dengan scroll bar atau yang menggunakan overflow auto, agar ketika di-scroll maka elemen dalamnya tidak terlihat menyentuh garis tepi atas atau bawah seperti pada animasi gif di bawah ini.

Cara Memanipulasi Tepi Atas Bawah Text Box Overflow Auto

Dari animasi di atas terlihat, walaupun element dalam di-scroll tetapi tetap pada tepi atas dan bawah box-nya memiliki jarak pada elemen yang ada di dalamnya.

Sebagai contoh mari kita lihat pada text box di bawah ini dengan CSS seperti berikut ini


.box-text{margin:0 auto;width:500px;height:200px;padding:10px;border:1px solid #666;text-align:left;overflow: auto;}

Dengan HTML seperti di bawah ini.


<div class="box-text">
Enter some content here.
</div>

Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana.

Untuk memanipulasi text box di atas, kita akan membuat elemen baru diluar box-nya dengan menghilangkan border pada text boxnya sehingga elemen barunya seolah-olah menjadi boxnya. Kode CSS-nya seperti di bawah ini dan silahkan bandingkan dengan text box yang di atas.


.boxout-text{margin:10px auto;width:500px;height:200px;padding:10px 0;border:1px solid #777;text-align:left;background:#fff;box-shadow:1px 1px 3px 0 #666}
.box-text{margin:0 0 0 10px;width:auto;height:200px;padding-right:10px;border:none;text-align:left;overflow: auto;}

Dan HTML-nya seperti di bawah ini


<div class="boxout-text">
    <div class="box-text">
Enter some content here. 
</div>
    </div>

Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana.

Dengan manipulasi tersebut maka ketika di-scroll, box seolah-olah akan tetap memiliki jarak antara tepi atas atau bawah dengan elemen dalamnya

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

16 Comments Add Comment

Pertamax Kang .. =D
Wah Keren Kang . Langsung ke TKP deh .. :-bd

Balas

Silahkan dicoba mas Aldhi :)

Balas

heheh mas adhy memang selalu menciptakan yang aneh2 aja, tpi betul juga biar lebih rapi ya mas :)

Balas

Aneh tapi Bermanfaat :-bd

Balas

Nah maksudnya seperti itu sist Leony :)
Buat mas Aldhi makasih :)

Balas

Keren kang, dengan begitu tulisan yang ada di box jadi kelihatan lebih rapih :)

Balas

terlihat menarik pastinya ya kang, mantap deh :)

Balas

Betul kang biar boxnya jadi lebih rapih :)

Balas

Iya kang dengan boxnya lebih rapi maka akan lebih menarik :)

Balas

mantap nih |o| jadi, bisa untuk menghemat tempat juga ya kang :-d

Balas

Mantap nih lebih menarik dan rapih ya Kang ? :D

Salam

Balas

Jadi lebih rapih text box nya kang ... :) Tapi saya jarang menggunakan text box kang ... :) Jadi nyimak aja deh kang :).
Sekalian tanya kang, saya pakai custom search google di blog saya dengan mengikuti tutor dari mas Adhy, tapi pada hasil pencarian tidak semua hasil pencarian menyertakan gambar kang, kira-kira dimana yang salah ya kang? Mohon di cek di blog saya MAKINTAU.com biar lebih afdol dan lebih tau masalahnya kang. Terimakasih sebelumnya. :)

Balas

memang kreatif mas adhy :-d

Balas

Mas baru paham nih setelah baca tutornya, mkasih mas :-bd

Balas

kalau saya sudah ada memodifikasi tentang scroll yang dipadu dengan background mas, saya hanya ingin mas melihat hasil modifikasi saya apakah ada yang perlu diperbaiki, kalau mas ada waktu judul artikelnya yaitu Modifikasi Menu Scroll dengan Backround Gambar. terima kasih

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×