I'm currently looking for a new job, preferably in the Asia-Pacific region but I would consider other regions as well. If you are hiring or have any leads, I would appreciate if you would drop me a message via the contact form, e-mail (daniel(at)spoodoo.com), Twitter, or LinkedIn.


Daniel

Office UI Fabric – Indeterminate Checkbox State


Recently I was playing a lot with the Office UI Fabric front-end framework and in one situation I needed a checkbox to be indeterminate. Up to Office UI Fabric 2.6.1 there are no CSS rules for an indeterminate checkbox, though. There are only CSS rules for the two states Checked and Unchecked and setting the DOM property indeterminate to true has no effect whatsoever.

In case you come across the same issue, here is the fix. Simply add the following CSS rules to your style sheet:

.ms-ChoiceField-input:indeterminate + .ms-ChoiceField-field:before {
  background-color: #666666;
  border-color: #666666;
  color: #666666;
  border-radius: 50%;
  content: '\00a0';
  display: inline-block;
  position: absolute;
  top: 4px;
  right: 0;
  bottom: 0;
  left: 4px;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
}

.ms-ChoiceField-input:indeterminate + .ms-ChoiceField-field:hover:before {
  background-color: #212121;
  color: #212121;
}

.ms-ChoiceField-input[type='checkbox']:indeterminate + .ms-ChoiceField-field:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-family: 'Office365Icons';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  content: '\e005'; /*instead of \e041 (tick)*/
  background-color: transparent;
  border-radius: 0;
  font-size: 13px;
  top: 3px;
  left: 3px;
}

These rules are the same as the rules for the pseudo property :checked with one small difference in the 3rd rule (look for the comment).

Here are the three different states after adding the CSS rules:

Unchecked:
Checked:
Indeterminate:

If you want to have a different icon for the indeterminate state, you can choose one from here and replace ‘\e005’ with the icon of your choice.

Tweet about this on TwitterShare on RedditShare on FacebookShare on Google+Share on LinkedInShare on StumbleUponShare on TumblrPin on PinterestDigg thisPrint this pageEmail this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *

*