Indeterminate Checkboxes Not Working in Outsystem

Indeterminate Checkboxes Not Working in Outsystem

  

Indeterminate Checkboxes Not Working in Outsystem

I tried both Javascript and query, checkbox still unchecked (it should be partially filled)

document.getElementById('NEwId').indeterminate=true;
$('#NEwId').prop('indeterminate', true);

Hi Rocky,

Indeterminate checkboxes are a property of HTML checkboxes, i.e. an Input with a type of "checkbox". Standard web app checkboxes are just this, and a quick test reveals that your code above works fine:

However, because these kind of checkboxes are, pardon my France, ugly as hell, SilkUI styles them by hiding the "original" checkbox (the one the browser renders) and creating, with CSS, a checkbox on the fly. And this CSS does not take the "indeterminate" state into account (if that's possible at all, I don't think there's a way for CSS to know whether a checkbox is indeterminate).

Solution

Hi Kilian and Rocky,


I did a small test and was able to customize the CSS for indeterminate checkboxes, as explained in the following URL: https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate.


Please check the examples below:




Cheers,

Renato


Kilian Hekhuis wrote:

Hi Rocky,

Indeterminate checkboxes are a property of HTML checkboxes, i.e. an Input with a type of "checkbox". Standard web app checkboxes are just this, and a quick test reveals that your code above works fine:

However, because these kind of checkboxes are, pardon my France, ugly as hell, SilkUI styles them by hiding the "original" checkbox (the one the browser renders) and creating, with CSS, a checkbox on the fly. And this CSS does not take the "indeterminate" state into account (if that's possible at all, I don't think there's a way for CSS to know whether a checkbox is indeterminate).



Solution

That's great Renato, didn't realize there's a pesudoclass for it.

Awesomies Renato ..Thanks,  you save my day :)