I've noticed that the UltraWebTree has a dotted line around it when I set focus to the control. I've only ever seen this in IE for embedded objects like Flash movies. Does anyone know why I would see this for the Tree component in Firefox or other browsers?
Hey jakeharlan_ibs,You can also use this CSS property to get rid of the focus rectangle in FireFox, IE, and Safari/Chrome<style type="text/css">
*:focus {outline: none;}
</style>
I hope that helps!-Tim
Hello,
Thanks for writing. Indeed, I was able to reproduce that - it only occurs in FireFox, right? So the problem is, FireFox in general places this frame for all elements that support focus/tabbing/accesskey/keyboard navigation. You can reproduce that even for a simple <div> like that:
<div id="div2" style="width:200px;height:200px" tabindex="-1"> fsdfdsfsdds <br /> fdsfdsfs <br /> </div>
The problem with the treeview is that it always sets tabindex on its main div, hence the focus rectangle. I could not find a property that could switch it off. I however, played a bit with the idea to call blur immediately after focus, and I must say with some pretty good results - this removed the frame for me. Here is my code:
<script language="javascript"> function initTree(id) { var tree = igtree_getTreeById(id); tree.Element.onfocus = function() { this.blur(); } } </script> <ignav:UltraWebTree runat="server" ID="TreeView1"> <Nodes> <ignav:Node Text="Mode 1"> </ignav:Node> <ignav:Node Text="Mode 1"> </ignav:Node> <ignav:Node Text="Mode 1"> <Nodes> <ignav:Node Text="Node 1.1"> </ignav:Node> </Nodes> </ignav:Node> </Nodes> <ClientSideEvents InitializeTree="initTree"/> </ignav:UltraWebTree>
The idea is to get the root Html element of the tree on init and attach a handler for focus that always calls blur. I've tested a bit and this does not seem to have any side effects on my simple setup (but I cannot guarantee that for more complex ones).
Hope this helps.