framework7: Membuat text select option word-wrap di smartSelect

smartSelect adalah salah satu fitur dari framework7 yang menyajikan halaman dinamis yang memudahkan user untuk menentukan pilihan dalam list yang banyak dengan fitur pencarian pilihan,grup kotak centang dan input radio.

Untuk penentuan pilihan bisa di tentukan secara manual maupun dinamis, pilihan bisa dilakukan secara banyak atau hanya satu item saja, dan pilihan banyak juga bisa dibatasi jumlah maksimal pilihannya.

Berikut adalah cara membuat select option text yang word-wrap, secara default jika text option terlalu panjang, secara otomatis akan di potong dan diganti dengan ..., seperti gambar diatas. Agar terlihat semua text dan mudah dibaca, harus ditambahkan style di cssnya.

 

Skrip untuk cssnya sebagai berikut:

     .smart-select .item-title { 

     text-overflow: ellipsis;

    word-wrap: break-word;

    white-space: normal; 

}

Dan hasilnya seperti gambar dibawah.

Cordova framework7 smartSelect Maret 09, 2021