With the dashboard projected onto a wall and zoomed in using Internet Explorer’s zoom so that everyone could clearly view the dashboard, I expanded the filter, only to get something similar to the following:
A complete fail.
In the moment, I neglected to realize that it was IE's zoom causing the problem, although I quickly discovered that back at my desk. At 100% it displayed perfectly. As IE's zoom increased or decreased away from 100%, the list moved out of view either to the upper left or to the lower right, eventually, just showing the word "false". Setting a zoom level in Chrome worked fine (of course), which did help me in finding a solution rather quickly.
In the moment, I neglected to realize that it was IE's zoom causing the problem, although I quickly discovered that back at my desk. At 100% it displayed perfectly. As IE's zoom increased or decreased away from 100%, the list moved out of view either to the upper left or to the lower right, eventually, just showing the word "false". Setting a zoom level in Chrome worked fine (of course), which did help me in finding a solution rather quickly.
Using Chrome's Developer tools I found that one of the enclosing DIV elements that displays the dropdown was using the following filter:
.pps-tree-layer1 { filter: progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=130,strength=3) }
Switching over to IE's Developer tools and disabling that filter, enabled the Multi-Select Tree Filter to display properly when zooming. A quick Google search for how to remove the filter via CSS yielded a blog post by Brian Johnson on How to Disable a CSS Filter in Internet Explorer. I applied that to the correct element as follows:
.pps-tree-layer1 { /* For IE 8+ */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(enabled = false)"!important; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(enabled = false)!important; }
and viola...
Zoomed and displaying correctly!