CODEWITHSUNDEEP
angularkendo-uikendo-treeview
Henrik Ståhlberg
Henrik Ståhlberg

Reputation: 318

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)

Upvotes: 1

Views: 900

Answers (2)

Henrik Ståhlberg
Henrik Ståhlberg

Reputation: 318

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.

Upvotes: 0

ezanker
ezanker

Reputation: 24738

Try adding this CSS rule at the end of your styles.css:

 checkbox:indeterminate+.k-checkbox-label::after {
    width: 8px;
 }

Upvotes: 2

Related Questions