Hello,
I have a Master Page with an UltraWebTree menu. The tree takes up the entire left side of the page. When a menu item is clicked, the entire control's focus rectangle appears. Its ugly and I want to get rid of it.I've tried to jimmy it using client side onfocus="blur();" and onfocus="img2.focus();"... to no avail.
Any suggestions?
Thanks,BruceH
Hello Bruce,
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 your 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.
Rumen,
Thanks, works like a champ. By the way, this was a problem in Internet Explorer as well.