Pemrograman

Bahasa

Framework

Peralatan

Info

Kesalahan Penyisipan CSS Select2 di Admin LTE yang Saya Lakukan

– 12 July 2016
Saya menghabiskan cukup banyak waktu untuk mengatasi masalah ini. Sampai-sampai mencari di Google, tapi tidak dapat solusi. Ceritanya, saya sedang mengerjakan sebuah proyek dengan Admin LTE. Kemudian saya menggunakan Select2 untuk element <select>. Akan tetapi, tampilannya tidak seperti yang diharapkan.

Kode HTML:
<div class="form-group">
    <label for="kabupaten">Kabupaten/Kota</label>
    <select name="kabupaten" class="select2 form-control">
        <option selected disabled>Pilih Kabupaten...</option>
        <option value="5201">Kab. Lombok Barat</option>
        <option value="5202">Kab. Lombok Tengah</option>
        <option value="5203">Kab. Lombok Timur</option>
        <option value="5204">Kab. Sumbawa</option>
        <option value="5205">Kab. Dompu</option>
        <option value="5206">Kab. Bima</option>
        <option value="5207">Kab. Sumbawa Barat</option>
        <option value="5208">Kab. Lombok Utara</option>
        <option value="5271">Kota Mataram</option>
        <option value="5272">Kota Bima</option>
    </select>
</div>

<div class="form-group">
    <label for="kecamatan">Kecamatan</label>
    <select name="kecamatan" class="form-control select2">
        <option selected disabled>Pilih Kecamatan...</option>
    </select>
</div>

<div class="form-group">
    <label for="desa">Desa/Kelurahan</label>
    <select name="desa" class="form-control select2">
        <option selected disabled>Pilih Desa...</option>
    </select>
</div>
Tampilanya:

Tampilan yang saya inginkan agar seperti di dokumentasi Admin LTE.

Setelah saya periksa kode sumber (HTML) dokumentasi Admin LTE, saya menemukan solusinya. Ternyata urutan penyisipan kode CSS-nya salah.
<link rel="stylesheet" href="assets/AdminLTE/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/AdminLTE/dist/css/AdminLTE.min.css" />
<link rel="stylesheet" href="assets/AdminLTE/dist/css/skins/_all-skins.min.css" />

<link rel="stylesheet" href="assets/AdminLTE/plugins/select2/select2.min.css" />
        
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" />

<script src="assets/AdminLTE/plugins/jQuery/jQuery-2.2.0.min.js"></script>
Pada penyisipan kode CSS di atas, saya menyisipkan kode CSS Select2 di bawah kode CSS AdminLTE. Ternyata urutan ini mempengaruhi hasilnya. Urutan yang benar, sesui yang di dokumentasi:
  1. Kode CSS Bootstrap
  2. Kode CSS Select2
  3. Kode CSS Admin LTE
  4. Kode CSS Skin Admin LTE
<link rel="stylesheet" href="assets/AdminLTE/bootstrap/css/bootstrap.min.css" /><link rel="stylesheet" href="assets/AdminLTE/plugins/select2/select2.min.css" />
<link rel="stylesheet" href="assets/AdminLTE/dist/css/AdminLTE.min.css" />
<link rel="stylesheet" href="assets/AdminLTE/dist/css/skins/_all-skins.min.css" />
        
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" />
Ternyata untuk masalah sekecil ini, saya membutuhkan waktu untuk menyelesaikannya.

Tampilan di atas, ukuran lebarnya 100%. Artinya kita harus menambahkan kode CSS lagi untuk mengaturnya. Kalau tidak, nanti tampilannya akan seperti di bawah ini.

Oleh karena itu, tambahkan sedikit kode CSS untuk mengaturnya:
<style>.select2 { width: 100% !important }</style>
Atau bisa juga dengan inline css pada elemen Select2.

Referensi: Dokumentasi Admin LTE

No comments :

Post a Comment