Masalah penataan kotak centang dengan kendo treeview

Penataan gaya kotak centang normal berfungsi dengan baik tetapi ketika kotak centang diklik di pohon, kotak centang grup pada pohon tersebut diubah. Ini adalah tanda hubung dan saya tidak dapat menemukan cara untuk memperkecilnya. Saya telah membuat kotak centang lebih kecil dan sekarang tanda hubung terlihat aneh di kotak centang. Bagaimana cara menata elemen itu dengan scss?

Gambar di bawah menunjukkan hasil saat ini

masukkan deskripsi gambar di sini

Saya mencoba kode berikut dan bagian :before dan :after berfungsi pada ikon centang dan ukuran kotak centang.

.k-checkbox {
  font-size: 8px;
}
.k-checkbox-label {
  font-size: 8px;
}
.k-checkbox-label:before {
  width: 16px;
  height: 16px;
  font-size: 8px;
}
.k-checkbox-label:after {
  width: 16px;
  height: 16px;
  font-size: 8px;
}

Idealnya, saya ingin ikon kotak centang grup selalu sama dengan kotak centang yang dicentang. (Itu jika Anda mengkliknya terlebih dahulu)


angular kendo-ui kendo-treeview
person Henrik Ståhlberg    schedule 17.04.2019    source sumber
comment
Apakah Anda memiliki stackblitz untuk dibagikan?   -  person Davide Bellone    schedule 17.04.2019
comment
@DavideBellone stackblitz.com/edit/angular-heudrq   -  person Henrik Ståhlberg    schedule 17.04.2019
comment
mungkin ini bisa membantu telerik.com/forums/   -  person Carlos Martins    schedule 17.04.2019

Jawaban (2)


arrow_upward
2
arrow_downward

Coba tambahkan aturan CSS ini di akhir style.css Anda:

 checkbox:indeterminate+.k-checkbox-label::after {
    width: 8px;
 }
person ezanker    schedule 17.04.2019

arrow_upward
0
arrow_downward

Terima kasih Ezanker karena telah menunjukkan di mana mencarinya. Tidak cukup hanya mengatur lebarnya menjadi 8px tetapi mengubah aturan CSS tersebut membuat saya dapat mengubah garis. Saya tidak begitu tahu apa yang sedang terjadi dan mengapa itu berhasil.

Aturan css berikut memberi saya tampilan yang saya cari.

    .k-checkbox:indeterminate+.k-checkbox-label::after {
        width: 8px;
        height: 1.3px;
        top: 8px;
        left: 4px;
    }

Bagian atas dan kiri tengah karena lebar kotak centang yaitu 16px.

person Henrik Ståhlberg    schedule 17.04.2019