Search code examples
angularkendo-uikendo-treeview

Checkbox styling issue with kendo treeview

The styling of the normal checkboxes works fine but when a checkbox is clicked in the tree the group checkbox of the tree is altered. It is a hyphen and I can't find a way to make it smaller. I have made the checkboxes smaller and now the hyphen looks weird in the checkbox. How Do I style that element with scss?

The picture below shows the current result

enter image description here

I tried the following code and that :before and :after parts works on th check icon and the checkbox sizes.

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

Ideally, I would like the group checkbox icon to always be the same as a checked checkbox. (It is if you click it first)

Solution

  • Thanks Ezanker for showing me where to look. It wasn't enough to just set the width to 8px but tweaking that CSS rule made me able to change the line. I don't really know what is going on though and why it works.

    The following css rule gave me the look I was after.

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

    The top and left center it because of the width of the checkbox that is 16px.