Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
380
UltraWebTree has onFocus border
posted

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?

  • 25
    posted

     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

  • 28464
    posted

     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.