Langsung ke konten utama

Select2 options tidak mau mucul ketika menggunakan modal


Menangani problem select2 list options tidak mau muncul di modal


Kategori: UI
Library: Select2
sumber library: https://select2.org/

Detail Permasalahan:
inputan menggunakan library select2 tidak muncul ketika menggunakan modal, akan tetapi kalau menggunakan form biasa tanpa modal bootstrap option tersebut muncul, ketika layar di lakukan zoom agak jauh ternyata yang option di modal muncul akan tetapi muncul nya di belakang UI modal.

ada lagi satu masalah yaitu option width nya cuma setengah jadi tulisannya terpotong.

solusi:
pada html pastikan seperti ini
<select class="form-select form-select-sm col-11" name="a_materi_subject"
data-live-search="true" style="width: 100%;"></select>

di js seperti di bawah ini:
$('select[name="a_materi_subject"]').select2({
        theme: "bootstrap-5",
        data: materi,
        placeholder: 'Pilih Mapel',
        allowClear: true,
        dropdownParent: $("#modal-add"),
        dropdownAutoWidth: true
    });

tambahkan: dropdownParent: $("nama modal nya") memunculkan option nya di modal
tambahkan: dropdownAutoWidth: true untuk membuat auto width option nya

hasil nya seperti di bawah ini. sesuai dengan yang di harapkan.



Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Membuat Database postgres atau Mysql di dbeaver

kali ini saya akan memberikan informasi cara membuat database SQL. di sini saya menggunakan postgre sql postgresql tidak jauh berbeda dengan mysql. berikut langkah langkahnya: saya menggunakan aplikasi database gui dbeaver untuk mempermudah pembuatan database. - buat koneksi baru di dbeaver. - setting koneksi jika localhost tidak jauh berbeda dengan settingan berikut. - buat Skema baru di dalam koneksi yang telah di buat, kemudian ketik nama skemanya. contoh di bawah ini saya membuat skema dengan nama test. - berikut skema yang telah kita buat - kemudian kita buat table baru. caranya klik kanan pada folder Tables -> create new table - klik di field Table Name (di cetak tebal/kotak merah) kemudian ketik nama table yang akan di buat. - buat kolom atau filed pada table. klik kanan di bawah colomn name -> create new coloumn. lihat gambar berikut: - input atribute kolom. di sini saya membuat nama kolom NIK, tipe data varchar, panjang data...
Posting Komentar
Baca selengkapnya

Cara mengakses localhost dengan domain di local pc / laptop

 Cara mengakses localhost dengan domain di local pc / laptop Environtment: - Apache2 - Laragon - OS: windows 11      dalam proses development aplikasi berbasis web di local pc / laptop saya menggunakan laragon dan di dalamnya terdapat apache2 disini saya menggunakan bahasa pemrograman PHP. apache ini digunakan untuk menjalankan service server nya. untuk mengakses aplikasi yang sudah di develop biasanya kita mengakses nya di browser dengan domain http://localhost/nama-project atau https://127.0.0.1/nama-project.      domain di atas kelihatan agak panjang apalagi kalau project kita sudah banyak maka untuk mempermudah mengakses project tersebut kita bisa membuat custom domain. nah domain local ini juga bisa berguna jika kita membuat aplikasi yang menggunakan pihak ke 3 seperti midtrans atau tokopedia dll yang menggunakan domain callback.     biasanya domain callback pada pihak ke 3 tidak mengizinkan menggunakan nama domain localhost atau 127.0.0...
Posting Komentar
Baca selengkapnya

Belajar Laravel 8 - 3.2 Routes

sekarang kita pelajari tentang yang namanya Routing dari laravel. ingat semua routing adanya di folder routes. khusus untuk web ada di file web.php  kalau kita lihat di halaman ini kita di kasih sebuah route default. cara bacanya kalau misalkan ada rute yang metode request nya get, metode get itu ketika kita mengakses di URL lewat browser yang alamatnya adalah slash ( / ), slash itu artinya kita ga ngasih apa-apa selain nama website kita atau kalau kita ketik slash di belakang domain kita seperti http://coba-laravel.test/ itu sama aja ini artinya dia menjalankan rute yang ini  kalau slash ini kita ganti jadi /about maka halaman http://coba-laravel.test sudah tidak bisa tampil lagi. tampilannya akan 404 | NOT FOUND. kenapa? karena ini tidak ada rute yang menangani alamat tersebut. sekarang kita punya nya /about jadi ketika kita aksesnya http://coba-laravel.test/about baru akan bisa tampil. jadi kalau kalian ingin membuat sebuah rute tinggal bikin Route::get lalu alamatnya apa. ...
Posting Komentar
Baca selengkapnya