ปัญหาการกำหนดรูปแบบช่องทำเครื่องหมายกับ kendo treeview

การจัดสไตล์ของช่องทำเครื่องหมายปกติทำงานได้ดี แต่เมื่อคลิกช่องทำเครื่องหมายในแผนผัง ช่องทำเครื่องหมายกลุ่มของแผนผังจะมีการเปลี่ยนแปลง มันเป็นยัติภังค์และฉันไม่สามารถหาวิธีทำให้เล็กลงได้ ฉันทำให้ช่องทำเครื่องหมายเล็กลง และตอนนี้เครื่องหมายยัติภังค์ดูแปลก ๆ ในช่องทำเครื่องหมาย ฉันจะจัดสไตล์องค์ประกอบนั้นด้วย scss ได้อย่างไร

ภาพด้านล่างแสดงผลปัจจุบัน

ป้อนคำอธิบายรูปภาพที่นี่

ฉันลองใช้รหัสต่อไปนี้แล้วและ :before และ :after ส่วนนั้นใช้ได้กับไอคอนกาเครื่องหมายและขนาดช่องทำเครื่องหมาย

.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;
}

ตามหลักการแล้ว ฉันต้องการให้ไอคอนช่องทำเครื่องหมายกลุ่มเหมือนกับช่องทำเครื่องหมายที่เลือกไว้เสมอ (คือถ้าคุณคลิกมันก่อน)


angular kendo-ui kendo-treeview
person Henrik Ståhlberg    schedule 17.04.2019    source แหล่งที่มา
comment
คุณมี stackblitz ที่จะแบ่งปันหรือไม่?   -  person Davide Bellone    schedule 17.04.2019
comment
@DavideBellone stackblitz.com/edit/angular-heudrq   -  person Henrik Ståhlberg    schedule 17.04.2019
comment
บางทีนี่อาจจะช่วยได้ telerik.com/forums/   -  person Carlos Martins    schedule 17.04.2019

คำตอบ (2)


arrow_upward
2
arrow_downward

ลองเพิ่มกฎ CSS นี้ที่ส่วนท้ายของ styles.css ของคุณ:

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

arrow_upward
0
arrow_downward

ขอบคุณ Ezanker ที่แสดงให้ฉันเห็นว่าจะดูที่ไหน การตั้งค่าความกว้างเป็น 8px นั้นไม่เพียงพอ แต่การปรับแต่งกฎ CSS ทำให้ฉันสามารถเปลี่ยนบรรทัดได้ ฉันไม่รู้จริงๆว่าเกิดอะไรขึ้นและทำไมมันถึงได้ผล

กฎ CSS ต่อไปนี้ทำให้ฉันมีรูปลักษณ์ที่ฉันต้องการ

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

ด้านบนและซ้ายอยู่ตรงกลางเนื่องจากความกว้างของช่องทำเครื่องหมายที่ 16px

person Henrik Ståhlberg    schedule 17.04.2019