Проблема со стилем флажка в дереве кендо

Стиль обычных флажков работает нормально, но при щелчке флажка в дереве изменяется групповой флажок дерева. Это дефис, и я не могу найти способ сделать его меньше. Я сделал флажки меньше, и теперь дефис в флажке выглядит странно. Как стилизовать этот элемент с помощью 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

Спасибо, Эзанкер, что показал мне, где искать. Было недостаточно просто установить ширину на 8 пикселей, но настройка этого правила CSS позволила мне изменить линию. Я действительно не знаю, что происходит и почему это работает.

Следующее правило css дало мне тот вид, который мне был нужен.

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

Верхний и левый центрируют его из-за ширины флажка, которая составляет 16 пикселей.

person Henrik Ståhlberg    schedule 17.04.2019